reactjs - angerlySetInnerHTML 中的 React 组件

Question

在我的应用程序中，我需要获取一个 HTML 字符串。
(从服务器或用户输入，也许是从 markdown 处理的东西，无论如何，看来我真的需要使用 setDangerousHtml 。 )

但我还需要该部分内的一些 react 组件。
例如，我会将一些链接转换为 Link来自 react 路由器；或者我在 HTML 中有类似 <myWidget:12345> 的内容到 react 组件 <MyWidget id="12345" text=this.props.text > .

执行此操作的 react 方式是什么？

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