在dangerouslySetInnerHTML中反应组件

Question

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

但我也需要在该部分内部使用一些反应组件。
例如，我会将一些链接从react-router转换为setDangerousHtml;或者我在HTML中有一些内容，例如Link到反应组件<myWidget:12345>。

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

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不应该在浏览器中使用，因此它可以正常工作。