Question

我有一个外部DOM节点，其中显示了一些动态内容。该DOM节点必须始终存在于页面上。我也有一个组件MyComponent，它在不同的时间已安装/卸载。挂载组件时，我希望它的render方法呈现现有的#data div，而挂载它时，应将div放回原处。

class MyComponent extends React.Component {
    componentWillMount() {
        // Maybe somehow move the `#data` div inside this compoennt
    }
    componentWillUnmount() {
        // Maybe move the `#data` div back at the end of the </body> tag.
    }
    render() {
       // Here it should just return the existing `#data` div
    }
}

未安装MyComponent：

<body>
<div id="app-root"></div>
<div id="data"></div> // has display: none while not used
</body>

已安装MyComponent：

<body>
<div id="app-root">
  // React stuff
  <my-component>
     <div id="data"></div>
   </my-component>
</div>
</body>

是否可以（在React组件中呈现纯HTML节点）？
对于我的问题是否有更好的解决方案（页面上始终有一个div，display: none;，但是在安装组件时，将其呈现在该组件内部）？

我用它来显示Google Ads，所以我有adDisplayContainer，它必须一直存在（并重复使用），但是我只想在显示特定组件时显示它（并且它必须在其中组件）。

Answer 1

您可以使用createPortal中的ReactDOM API

https://reactjs.org/docs/react-dom.html#createportal

安装后将React外部HTML DOM节点放入组件

1 个答案: