1

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

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

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

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

当我单击按钮时，确实会打开一个窗口，但它是空白的，并且只显示标题：“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;
}

}

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

此外，当我单击按钮时，父页面的最底部会显示 的内容：

        <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 窗口中的样子。

所以我不太确定为什么会这样。

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

谢谢！

4

1 回答 1

1

而不是在身体上创建门户。在 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
    )
}

因此，在您的情况下发生的事情是您正在安装在删除所有 ui 以及 React 的主根 div 的主体上。

于 2020-04-09T16:22:01.620 回答