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

Posted 2023-02-25

【中文标题】使用反应渲染时如何访问现有的 dom 元素？

【英文标题】：How can I access existing dom elements when using react render?

【发布时间】：2018-07-15 23:32:09

【问题描述】：

我将在现有网站中渲染一个 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>

【问题讨论】：

你想对现有的子元素做什么？

为什么不使用状态并将其传递给子元素？

【参考方案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

【讨论】：

听起来很合理，但我希望避免这种情况，文档似乎有点神秘，github.com/facebook/react/issues/4265

这是我遇到的确切问题（以及我发现的 GitHub 问题），最终不得不使用我发布的解决方案。这很烦人，但在他们真正进一步“澄清”之前，我认为没有更好的方法。

这似乎是一个准确的解释