Reactjs 在初始渲染时找不到ref

我刚刚在官方文档中读到componentdiddupdate在第一次渲染时没有被调用，我想这可能就是为什么我的这个组件在第一次渲染时没有定义dom的原因

这是一个弹出模式，在需要编辑页面时弹出

我还有别的办法吗

componentDidUpdate() {
    this.renderSingularForm();
}

renderSingularForm() {
    let dom = ReactDOM.findDOMNode( this.refs.singularForm );
    if ( this.props.pageObjToEdit && dom ) {
        // DOESN'T GO HERE ON FIRST RENDER BECAUSE DOM IS NULL

        createForm( window, dom, this.props.pageObjToEdit );
    }
}

render() {
    if ( this.props.pageObjToEdit ) {
        return (
            <div>
                <div ref="singularForm" />
            </div>
        );
    }
    else {
        return null;
    }
}

componentDidUpdate（）{
this.renderSingularForm（）；
}
renderSingularForm（）{
让dom=ReactDOM.findDOMNode（this.refs.singularForm）；
if（this.props.pageObjToEdit&&dom）{
//在第一次渲染时不转到这里，因为DOM为NULL
createForm（窗口、dom、this.props.pageObjToEdit）；
}
}
render（）{
如果（this.props.pageObjToEdit）{
返回(
);
}
否则{
返回null；
}
}

您可以而且应该使用，以便安全地获取DOM元素或引用

从文档中：

componentDidMount（）在创建组件后立即调用 安装。需要DOM节点的初始化应转到此处。

但是，对于模态和工具提示这样的情况，当 在呈现依赖于的内容之前，需要测量DOM节点 在它的大小或位置上

还要注意您正在使用。
你应该用新的

运行示例：

类应用程序扩展了React.Component{
componentDidMount（）{
log（this.myDiv.id）；
}
render（）{
返回(
（this.myDiv=ref）}>some div
);
}
}
render（，document.getElementById（“根”））
这是一个关于如何使用REF的问题。您不应该再使用字符串引用，因为它们是。大多数人现在都在使用内联ref（
ref={ref=>this.input=ref}
），但当您这样做时，组件第一次呈现时将收到一个
null
值。然后在第二次渲染时，将使用DOM元素正确指定参照

为了解决这个问题，您应该为
ref
属性提供一个类方法，而不是一个内联函数

例如：

这：

render（）{
返回(
...
...
)
}

应该是：

applyRef = ref => {
    this.singularForm = ref;
}
render() {
    return (
        ...
        <div ref={this.applyRef} />
        ...
    )
}

applyRef=ref=>{
此.form=ref；
}
render（）{
返回(
...
...
)
}

当您使用类方法应用ref时，当实际元素添加到dom中时，它只会被调用一次，因此您不应该再获得初始
null
值

更新10/18:
现在，您可以使用新的创建引用来完全避免此问题。
hm我在前面和刚刚尝试了componentDidMount。。但是现在表单不会生成。我已经更新了关于您的ref问题的答案。谢谢您在答案中的更新。阅读文档并查看示例以进一步理解。啊，我明白了。谢谢你的解释。让我重读一遍，以便更好地理解，让我试着应用你给出的例子不起作用，但一旦我了解了你所说的概念，我就可以应用它了！我花了一段时间才理解这个概念，但当我理解的时候，它起了作用。ty againhm实际上它可以工作，但在我遇到无法访问实际元素的错误后不久。。嗯，好吧，我让它工作，但它仍然没有加载第一次渲染。。令人沮丧的
applyRef = ref => {
    this.singularForm = ref;
}
render() {
    return (
        ...
        <div ref={this.applyRef} />
        ...
    )
}