Question

React代码中有一个错误，其中一个组件需要在页面上定位一个元素，但是该元素尚未呈现。

处理调用这两个组件的render方法如下：

render() {
    const generatedId = "myComponent123"
    return (
        <ParentComponent generatedId={generatedId}>
           <ChildComponent generatedId={generatedId} />
        <ParentComponent/> 
    ) 
}

ParentComponent呈现其子级：

render() {
    return (
        <div id={this.props.generatedId}>
            {this.props.children}
        </div> 
    )
}

ChildComponent需要找到其父组件才能设置样式：

render() {
    const myParentsScrollPosition = getWindow().document.getElementById(
        this.props.generatedId
    ).scrollTop;
    return (
        <div style={{ top: `${myParentsScrollPosition}px` }}>
            ...
        </div>
    );
}

我遇到的问题是这两个组件都被渲染为异步，因此当ChildComponent检查.getElementById(this.props.generatedId)时该元素不存在。它仍在渲染。

如何让ChildComponent等到ParentComponent呈现并因此可以在DOM中使用？

或者，我在考虑其他解决方案，但不确定。例如，我可以等待父级挂载后再渲染子级，以确保它在DOM中始终可用吗？

Answer 1

您不应该在渲染上执行此操作-元素出现在屏幕上（仅限DOM）不是这样。您应该使用componentDidMount 但是然后您可能也会遇到问题，实际上componentDidMount首先在孩子上触发，然后才在父母上触发，您还是应该尝试，因为react无论如何都会提交完整的DOM，所以当孩子的componentDidMount可以工作时应该表示父级也已经在DOM中（我不建议这样做）。我建议在您的父div或父组件中的任何内容上获取ref，然后从那里获取它的scrollTop并直接通过props传递给子级。

React等待父组件渲染

1 个答案: