将反应组件添加到 contenteditable 或 innerhtml答案

【问题标题】：Adding react component to contenteditable or innerhtml将反应组件添加到 contenteditable 或 innerhtml
【发布时间】：2016-01-12 07:41:02
【问题描述】：

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

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

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

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

也就是说，React Components 可以添加到 React Components 之外的 html 元素的 contentEditable 或 innerHtml 中吗？

【问题讨论】：

标签： javascript reactjs medium-editor

【解决方案1】：

你必须将 React 组件渲染为字符串。

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

【讨论】：

需要注意的是，这会将标记交给编辑器，编辑器将再次退出 React 世界。编辑器可以用它为所欲为。这似乎会导致很多问题
是的，这是一条路。从 React 世界出来。我无法想象这个用例背后的原因是什么。相反，OP 应该考虑将 contentEditable 包装到 React 组件中并控制发生的事情。
感谢您的回答！用例是我使用的编辑器不是内置的或用于反应的，而是在反应应用程序内部。目的是 (1) 不重复已在组件中设置的标记。 (2) 更重要的是，让它充当 React 组件，而不仅仅是 html 标记。因此，不是通过 renderToString 渲染组件的标记，是否可以实际渲染组件并让它不退出 React 世界？（对于@JoshDavidMiller 的观点）。换句话说，它是否表现得像一个 React 组件，而不仅仅是共享它的标记？
@geoboy 我不知道有什么方法可以做到这一点，不。这两个系统（React 和medium-editor）有自己的生命周期，更重要的是，medium-editor 是由 DOM 驱动的，而 React 是由 virtual DOM 驱动的。难免会发生冲突。
在 React 生态系统中，有门户的概念。门户将组件渲染到“其他”容器 - 无论您选择哪个。在这种情况下，它可以是 contentEditable div（或任何其他元素）。例如。模态是此处门户的完美候选者 - 它们被渲染到 document.body。不给保证，给它一个机会。看看这个npmjs.com/package/react-portal repo（或任何类似的）。这里的小理论：joecritchley.svbtle.com/portals-in-reactjs