将门户位置传递给孩子

时间:2019-02-21 16:08:57

标签: reactjs

我想使用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;
)

0 个答案:

没有答案