我已经阅读了很多关于 Portal 的文章,并决定制作一个。
我有一个显示表格的简单反应页面。
因此,我制作了一个按钮,单击该按钮会模糊表格并打开门户。
它“有效”,但由于某种原因,表格不像我在阅读的文章中看到的那样居中。
它只出现在页面底部的模糊表格下方。
这是我的门户:
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)'
)
}
这是我的表函数:
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')
)
如何使门户显示在屏幕中间而不是底部?
我需要使用其他组件或库吗?
谢谢!