Question

我试图获取ReactDOM.createPortal来覆盖我正在安装的容器的内容。但是，它似乎是appendChild。

是否可以覆盖内容？类似于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内容之前清除div的内容

class PrivacyContent extends React.Component {

    constructor(props) {
        super(props);
        const myNode = document.getElementById("privacy");
        while (myNode.firstChild) {
            myNode.removeChild(myNode.firstChild);
        }
    }
    render() {
        return createPortal(
            <div>
                <button onClick={this.handleClick}>
                    Click me
                </button>
            </div>,
            document.getElementById('privacy')
        )
    }

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

}

export default PrivacyContent;

Answer 2

如果您知道自己在做什么，下面是一个<Portal />组件，它在幕后创建了一个门户，清空了目标DOM节点，并使用任何道具挂载了任何组件：

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。

希望有帮助。

createPortal不会覆盖div内容（如ReactDOM.render）

2 个答案: