打开一个新的 React Portal 只会打开一个没有内容的空页面

Question

我正在尝试打开 React 门户，但我遇到了一些问题：

这是打开按钮所在的位置：

return (
    <div id="mainContent">
        <table>
            <td> <button onClick={() => { setIsPortalOpen(!isPortalOpen); }}>{row.original.title}</button> </td>
        </table>

        {isPortalOpen && (
            <Window>
                <MyPortal />
            </Window>
        )}
    </div>
)

当我单击该按钮时，确实会打开 window，但它是空白的并且只显示标题："A react portal window"

并且只包含一个空 div： div="window-container">

这是包含 Portal 的函数：

const [isPortalOpen, setIsPortalOpen] = useState(false);

function MyPortal() {
    return ReactDOM.createPortal(
        <div id="portal_ProjectDetails">
            <div>Project Details</div>
            <div>HEY THERE THIS IS A TEST OF THE PORTAL SYSTEM</div>
        </div>,
        document.body
    )
}

这是 Window.js 的代码：

import React from "react";
import ReactDOM from "react-dom";

export default class Window extends React.Component {
constructor(props) {
    super(props);
    this.state = { win: null, el: null };
}

componentDidMount() {
    let win = window.open("", "", "width=600,height=400,");
    win.document.title = "A React portal window";
    let el = document.createElement("div");
    el.id = "window-container";
    win.document.body.appendChild(el);
    this.setState({ win, el });
}

componentWillUnmount() {
    this.state.win.close();
}

render() {
    const { el } = this.state;
    return el ? ReactDOM.createPortal(this.props.children, el) : null;
}

}

正如我所说，当我单击按钮时 window 确实打开了，但它是空的。

另外，当我点击按钮时，parent 页面的最底部会出现以下内容：

        <div id="portal_ProjectDetails">
            <div>Project Details</div>
            <div>HEY THERE THIS IS A TEST OF THE PORTAL SYSTEM</div>
        </div>

这是我的 index.js:

ReactDOM.render(
    <React.Fragment>
        <MainProjects />
        <div id="portal-root"></div>
    </React.Fragment>,
    document.getElementById('root')
)

但这就是我想在 Portal 中显示的内容 window。

所以我不太清楚为什么会这样。

我能做些什么来解决这个问题吗？

谢谢！

Answer 1

而不是在 body 上创建门户。在你的 index.html 中创建一个新的 div 并给它一个 id

<div id="portal-root"></div>

并将您的 MyPortal 组件更改为此

const [isPortalOpen, setIsPortalOpen] = useState(false);
const portalRoot = document.getElementById('portal-root')
function MyPortal() {
    return ReactDOM.createPortal(
        <div id="portal_ProjectDetails">
            <div>Project Details</div>
            <div>HEY THERE THIS IS A TEST OF THE PORTAL SYSTEM</div>
        </div>,
        portalRoot
    )
}

那么在你的情况下发生的事情是你正在安装在 body 上，它删除了所有 ui 以及 React 的主根 div.

打开一个新的 React Portal 只会打开一个没有内容的空页面

Opening a new React Portal only opens an empty page with no content

reactjs

react-portal