我刚刚在官方文档中读到，第一次渲染时没有调用 componentDidUpdate，我想这可能就是为什么我的这个组件第一次渲染时 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;
    }
}

这是您如何使用 ref 的问题。您不应该再使用字符串引用，因为它们很快就会被弃用 https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs。大多数人现在使用内联引用（ref={ref => this.input = ref}），但是当你这样做时，组件第一次渲染时会收到一个null价值。然后在第二次渲染时，refs 将正确分配给 DOM 元素。

为了解决这个问题，您应该向refprop 而不是内联函数。

Example:

This:

render() {
    return (
        ...
        <div ref="singularForm" />
        ...
    )
}

应该：

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

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

10/18 更新：

现在，您可以使用新的方法完全避免此问题React.createRef https://reactjs.org/docs/refs-and-the-dom.html#creating-refs创建您的参考。