Question

所以我有一个称为Root的React Context，并且我想像这样为RootProvider定义一个初始引用

<RootProvider initRef={() => this.refs.huh}>
    <div ref="huh">
       <Initialize />
    </div>
</RootProvider>

RootProvider确实有一个名为getInitRef的函数：

getInitRef() {
   return this.props.initRef();
}

初始化组件：

render() {
    return (
        <RootConsumer>
        {({context}) => {
            this.RootConsumer = context;
            return (<h1>hello</h1>);
        }}}
        </RootConsumer>
     );
}
componentDidMount() {
    console.log(this.rootConsumer.getInitRef());
}

期望：返回初始div。（ref = huh），因为Initialize组件已加载到div ref =“ huh”元素中，因此ref应该在安装Initialize组件之前进行了初始化。

但是结果：未定义

意思是console.log（this.rootConsumer.getInitRef（））;返回未定义。

现在，我能明白为什么了，仅仅是因为目前看来RootConsumer确实已经安装了ref。

可行的解决方案正在改变

componentDidMount() {
    console.log(this.rootConsumer.getInitRef());
}

到

componentDidMount() {
    window.setTimeout(() => {
        console.log(this.rootConsumer.getInitRef());
    },0);
}

现在我的问题是：

在安装子组件时，这是否意味着父元素已经完全安装？（如前所述）
使用setTimeout时：仅在父元素完全初始化其refs时才安全，始终运行吗？换句话说：在这种情况下，setTimeout是否是一个稳定的解决方案？

ReactJS上下文，参考和componentDidMount循环

0 个答案: