首页 文章

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

提问于
浏览 次
0

我将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>
javascript reactjs

1 回答

  • 1

    不幸的是，这在ReactDOM中是不可能的 .

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

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

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

相关问题