将反应门户置于父元素之上

Question

我已经阅读了很多关于 Portal 的文章并决定制作一个。

我有一个显示 table.

的简单反应页面

所以我制作了一个按钮，点击后会模糊 table 并打开门户。

它 "works"，但由于某些原因 table 不像我在阅读的文章中看到的那样居中。

它只是出现在页面底部，在模糊 table 下方。

这是我的门户：

function MyPortal() {
    return ReactDOM.createPortal(
        <div>
            <div>My first Portal!</div>
            <div>HEY YOU</div>
        </div>,
        document.getElementById('portal-root'),
        document.getElementById('DisplayTable').style.filter = 'blur(5px)'
    )
}

这是我的 table 函数：

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

// some data processing code for the table


return (
    <div id="mainContent">
        <div id="DisplayTable">
            <table>
                <tr>
                    <td>My Table</td>
                </tr>
                <tr>
                    <td><button onClick={() => { setIsPortalOpen(!isPortalOpen); }}>Portal Button</button></td>
                </tr>
            </table>
        </div>
         {isPortalOpen && (
            <MyPortal />
        )}
    </div>
)

这是我的主要内容 index.js:

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

如何让门户显示在屏幕中间而不是底部？

我需要使用其他组件或库吗？

谢谢！

Answer 1

这就是我的做法。我相信有很多方法可以做到这一点。

我将此添加到门户的主要父 div：

z-index: 100;

然后我将其添加到门户创建的 div 中：

position: absolute; 
background-color: #eee;
border: 1px solid #555;
left:0;
right:0;
margin-left: auto;
margin-right: auto;
height: 75%;
top: 15%; /* push down by 50% of the height of the container */
width: 80%;
margin-top: -25px; /* bring it back up by half of it's height */

就像我说的，有很多方法可以实现这一点，这就是我的方法。

将反应门户置于父元素之上

Centering a react portal on top of the parent element

css

flexbox

reactjs

react-portal