使用反应渲染时如何访问现有的 dom 元素？

Question

我将在现有网站中渲染一个 React 组件，根元素的示例可能是：

<div id="root"></div>

我想做的是，访问根元素内的任何 html 以开始，例如：

<div id="root">Hello world</div>

文档seems to indicate 您可以按照以下方式做一些事情：

ReactDOM.render() 不修改容器节点（只修改 容器的孩子）。可以插入一个 组件到现有的 DOM 节点而不覆盖现有的 孩子们。

我尝试使用 refs 访问，但我无法访问这些子 DOM 元素，有谁知道我该如何实现？

<div id="root" ref="root">Hello world</div>

Answer 1

不幸的是，这在 ReactDOM 中是不可能的直接。

<div id="root"> 中的“Hello world”字符串被视为容器节点的子节点，因此被覆盖。

相反，您需要从div 获取.innerHTML，ID 为root 在 ReactDOM 的render() 方法被调用之前。之后你可以做任何你想做的事情：

let root = document.getElementById("root");
let existingContent = root.innerHTML;
ReactDOM.render(yourReactComponent, root);
console.log(existingContent); // Do whatever you need to do with this