产品出现的问题:
braft-editor生成的htmlstring格式富文本内容,经由react中的dangerouslySetInnerHTML不做处理直接展示时,img的出现会很突兀。
我最终的解决方案:
加载富文本内容时,图片优先请求了模糊版,起到了即刻占位的作用,随后富文本内容的图片清晰版通过filter动画逐渐呈现。
插件:
(1) htmr
感谢简书如何把html字符串转成一个React组件? - 简书 提供的思路。这个插件可以适当自定义htmstring的实际渲染规则,比如把img替换成react组件。
【额外的】
需要下面的条件把文本内容直接返回,详见其npm的描述文档。
else if (typeof props === "undefined") { return <>{ nodeName }</>; }
(2) react-progressive-image-loading
一个图片渐进式模糊加载的插件,参见我上一则帖子 www.v2ex.com/t/818727 因为落实上述方案的项目,在图片资源方面,可以类似阿里云的OSS那样在图片地址后面加w/40/h/50这样的宽高参数获得指定尺寸图片,我再通过css放大成原图需要展示的大小便能获得模糊版。
【额外的】
如果图片404了,这个插件会保留filter: blur(10px);
的样式,如果想替换或者移除,我给该插件render属性里的img加了这么一段
onError={(e: any) =>{ e.target.onerror = null; e.target.style = "filter:none;" }}
相关部分的代码:
import htmr from "htmr"; import ProgressiveImage from "react-progressive-image-loading"; const transform = { _: (nodeName: any, props: any, children: any) => { if (nodeName == "img") { let itemSrc = props.src; let itemStyle = props.style; return ( <ProgressiveImage transitionTime={1800} preview={`${itemSrc}?op=thumb/fit/w/${ itemStyle?.width / 24 || 40 }/h/${itemStyle?.width / 24 || 40}`} src={itemSrc} render={(src, style) => ( <img src={src} style={Object.assign(style, { ...itemStyle, })} onError={(e: any) =>{ e.target.onerror = null; e.target.style = "filter:none;" }} /> )} /> ); } else if (typeof props === "undefined") { return <>{ nodeName }</>; } return React.createElement(nodeName, props, children); }, }; …… //渲染部分 {htmr(某个htmlstring变量名, { transform })}
题外话总结: 幸好工时足够,无意间组合出了百度能查到那则简书结果的关键词,因而破了局。此前,机械性的尝试了自己用原生js拿到htmlstring渲染后的dom进行操作。
[=============================更新]
我自己的项目后来发现有个唯一key报错没解决,问题定位到确实是htmr这个插件渲染出的内容有唯一key报错。
实在搞不定,现在就换成 html-react-parser 了