时间戳

首页 > 解决方案 > createPortal 不会覆盖 div 内容（如 ReactDOM.render）

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

问题描述

我正在尝试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;

标签： reactjs

解决方案

如果您知道自己在做什么，这里有一个<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挂载。MyComponentotherProps

希望有帮助。

推荐阅读