reactjs - createPortal 不会覆盖 div 内容(如 ReactDOM.render)

Question

我正在尝试获取 ReactDOM.createPortal要覆盖容器的内容，我也正在安装它。但是它似乎附加了Child。

是否可以覆盖内容？类似于 ReactDOM.render ?

这是我的代码:

import React from 'react';
import { createPortal } from 'react-dom';

class PrivacyContent extends React.Component {

    render() {
        return createPortal(
            <div>
                <button onClick={this.handleClick}>
                    Click me
                </button>
            </div>,
            document.getElementById('privacy')
        )
    }

    handleClick() {
        alert('clicked');
    }

}

export default PrivacyContent;

Answer 1

如果您知道自己在做什么，这里是 <Portal />引擎盖下的组件创建一个门户，清空目标 DOM 节点并使用任何 props 挂载任何组件:

const Portal = ({ Component, container, ...props }) => {
  const [innerHtmlEmptied, setInnerHtmlEmptied] = React.useState(false)
  React.useEffect(() => {
    if (!innerHtmlEmptied) {
      container.innerHTML = ''
      setInnerHtmlEmptied(true)
    }
  }, [innerHtmlEmptied])
  if (!innerHtmlEmptied) return null
  return ReactDOM.createPortal(<Component {...props} />, container)
}

用法:

<Portal Component={MyComponent} container={document.body} {...otherProps} />

这将清空 document.body 的内容，然后安装 MyComponent传下去的同时 otherProps .

希望有帮助。