解析&使用React组件包装HTML字符串

时间:2017-03-14 22:50:51

标签: string parsing reactjs elements

我正在点击API端点,它以字符串形式返回博客帖子的HTML。因此,响应字符串中有大量<p>代码,<img><span><div>标记,并且具有非无关紧要的元素嵌套量。

在react应用程序中,我想解析这个HTML字符串,并用自定义反应组件替换一些HTML元素(图像,段落)(即将图像标记包装在延迟加载的反应组件中)。

这样做的好/干净方法是什么?尝试使用正则表达式解析HTML似乎是一个反模式,我不确定还有其他可能的选项。将字符串解析为传统的dom节点,然后遍历集合?

目前我只是使用dangerouslySetInnerHTML在反应组件中渲染html-as-string。

什么是使用React组件包装html-as-a-string实体的可靠,非正则表达方式,同时保持节点的原始顺序(即在博客文章中)? < / p>

1 个答案:

答案 0 :(得分:2)

看看这个模块,看看它是否可以帮到你:(https://www.npmjs.com/package/html-to-react)。基本上,你可以:

  1. 将html字符串转换为React组件节点
  2. 替换元素之子