Question

我想使用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 个答案: