将反应组件添加到contenteditable或innerhtml

Question

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

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

我最好添加一个React组件。

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

换句话说，可以将React Components添加到React Components之外的html元素的contentEditable或innerHtml中吗？

Answer 1

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

要实现此目的，请使用ReactDOMServer。确切地说，使用其renderToString方法。这将输出具有React所需的所有花哨元素属性的字符串（例如data-react-id）。如果您使用的是清洁输出，请改用renderToStaticMarkup。