React - 解析HTML字符串并在其中的特定位置插入组件

时间:2017-04-22 03:26:06

标签: javascript regex reactjs

我正在为希望显示Zendesk支持文章数据的客户开发一个应用程序,其内容比API /工具支持的内容更丰富。该API由Zendesk上的基本WYSIWYG编辑器提供支持,能够使用<p><img>以及<a>标记提供HTML blob。但是,它无法轻易嵌入视频,显示图片库或链接到应用中的其他位置,而无需进行硬刷新。

因此我们决定构建少量的DSL语法,客户端可以键入一些可以在我们的应用程序上解析并变成更丰富内容的内容。例如:

[[ video src="youtube.com/whatever" ]]

可能会在我们的应用上被解析出来,并替换为直接在文章中嵌入该视频的iframe

我已经使用了各种有趣/有问题的RegExp魔法,上面的示例工作正常。

  

我知道使用RegExp解析HTML是一个主要的反模式,我通过不解析 HTML 本身来解决它 - 我只是在寻找{{ 1}})。

基本上,我解析每个代码,确定要替换它的内容,传回该组件,然后调用[[...]]将生成的HTML插入到文章HTML字符串中,然后使用该字符串呈现给页面ReactDOMServer.renderToString(replacementEl)

尽管存在明显的混乱问题,但这仍然很有效。 (我知道,但客户想要一个功能非常丰富的解决方案,并希望使用Zendesk API)。

问题在于:此解决方案仅在呈现 HTML 时有效。当我尝试渲染时,工作,例如dangerouslySetInnerHtml(来自React路由器)或自制的<Link>组件

所以我想弄清楚是否有一个很好的方法来做到这一点。理想情况下,不需要在HTML blob上运行完整的RegExp(即obviously a mess)。

我猜测解决方案将涉及删除代码,将无代码HTML字符串转换为实际的React组件(而不是将字符串吐入另一个元素),然后,基于某种类型的分类帐短代码进入这个新的React组件,将内容插入页面。

但如果有人遇到过类似的问题,我会很感激。我想以一种并非完全疯狂和脆弱的方式做到这一点,尽管这显然是一个固有的混乱问题。

编辑:澄清一下,当我说它不起作用时,我的意思是与React组件关联的JavaScript不会运行。例如,如果我用<Gallery />替换代码,<Link to="whatever" />会成功将该组件转换为最终的HTML(ReactDOMServer.renderToString标记),但点击该标记时没有任何反应,因为实际上仅在常规点击中更改<a>的JavaScript不会运行。

所以也许更尖锐的问题是:

有没有办法将React组件插入到HTML字符串中,以便保留其JavaScript功能而不仅仅是HTML?

0 个答案:

没有答案