javascript - 将反应组件添加到 contenteditable 或 innerhtml

Question

我正在使用使用 contentEditable 但不在 React 中的内容编辑器（特别是媒体编辑器）。我有一个用例，有人可以拖放图像，或者我可以插入图像。我的问题不是将以下内容添加到编辑器的 html 中：

editorHtml += '<img src ="something />'

理想情况下，我想添加一个 React 组件。

editorHtml += '<CoverImage src="something" />'

换句话说，React 组件是否可以添加到 React 组件之外的 html 元素的 contentEditable 或 innerHtml 中？

Answer 1

您必须将 React 组件呈现为字符串。

为此，请使用ReactDOMServer. 准确地说，使用它的renderToString方法。这会输出带有 React 需要的所有花哨元素属性的字符串（例如data-react-id）。如果您追求更清晰的输出，请改用renderToStaticMarkup。