我想使用React Portal(https://reactjs.org/docs/portals.html)。门户应该呈现的位置也由React呈现。有一个组件使门户网站成为“占位符”(可以称呼它),并且必须将其传递给其子级,以便其中一个(或多个)可以ReactDOM.createPortal
。
是否有推荐的方法?
我正在使用引用来捕获门户占位符。在第一个渲染中,孩子得到他们期望的道具中的null
。在尝试渲染门户网站之前,我还要检查子级是否为null。我不在状态中存储参考。有时候,获得裁判会导致孩子的性行为发生改变,有时甚至是行不通的。
如果我尝试直接在子项上document.getElementById
(通过在父组件中对占位符的ID进行硬编码)不起作用,因为在第一个渲染中DOM不知道该元素。 / p>
编辑:添加了代码示例
class Parent extends React.Component {
render {
return (
<div>
<div ref={ref => this.portalContainer = ref}/>
<SomeChild renderYourPortalHere={this.portalContainer}/>
</div>
)
}
}
const SomeChild = props => (
props.renderYourPortalHere
? ReactDOM.createPortal(<IrrelevantOtherComponent/>, props.renderYourPortalHere)
: null;
)