将react组件添加到contenteditable或innerhtml

Adding react component to contenteditable or innerhtml

本文关键字：contenteditable innerhtml 添加 react 组件更新时间：2023-09-26

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

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

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

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

换言之，React Components是否可以添加到React Components之外的html元素的contentEditable或innerHtml中？

您必须将React Component渲染为字符串。

为此，请使用ReactDOMServer。确切地说，使用其renderToString方法。这将输出具有React所需的所有花式元素属性的字符串（例如data-react-id）。如果您想要更干净的输出，请改用renderToStaticMarkup。