在危险的SetInnerHTML 中反应组件

Question

在我的应用程序中，我需要获取一个 HTML 字符串。
（从服务器或从用户输入，也许是从 Markdown 处理的东西，无论如何，似乎我真的需要使用setDangerousHtml.）

但是我还需要在该部分中使用一些反应组件。
例如，我会将一些链接转换为Link来自 react-router；或者我在 HTML 中有一些东西，比如<myWidget:12345>react 组件<MyWidget id="12345" text=this.props.text >。

这样做的反应方式是什么？

Answer 1

解决这个问题的方法之一是使用RenderToString函数。将要插入的组件转换为字符串，如下所示：

import React, { Component } from 'react';
import { renderToString } from 'react-dom/server';
import MyComponent from 'MyComponent.jsx';

var MyComponentString = renderToString(MyComponent);

现在，将此字符串连接到来自 API 的任意位置的字符串中。使用基本的字符串操作函数来实现这一点。

然后，使用setDangerousHtml来实现最终的新DOM。尽管这可能不是推荐的方法，因为RenderToString不应该在浏览器中使用，但它会起作用。