调用componentDidMount

Question

这是我第一次尝试在React中使用ref。

我有此代码：

constructor(props) {
    super(props);
    this.state = {
        percent: 100,
    };
    this.node = createRef();
}
componentDidMount() {
    this.props.resetHandlebarPosition();
    console.log(this.node);
    this.node.current.fitToViewer();
}

render() {
    return (
        <div
            className={styles.stageView}
            onClick={this.onStageClick}
            role="presentation"
        >
            <AutoSizer>
                {(({ width, height }) => width === 0 || height === 0 ? null : ( // eslint-disable-line
                    <ReactSVGPanZoom
                        width={width}
                        height={height}
                        ref={this.node}
                        detectAutoPan={false}
                        toolbarPosition={'left'}
                        miniaturePosition={'left'}
                        toolbarProps={{ SVGAlignX: 'center', SVGAlignY: 'center' }}
                        background={'#f1f3f2'}
                        className={styles.viewer}
                    >
                        <svg
                            width={svgwidth}
                            height={svgheight}
                            xmlns="http://www.w3.org/2000/svg"
                            xlinkHref="http://www.w3.org/1999/xlink"
                            style={"padding-top: 15px"} // eslint-disable-line
                        >
                            <g
                                dangerouslySetInnerHTML={{ // eslint-disable-line
                                    __html: this.props.svgString,
                                }}
                            />
                        </svg>
                    </ReactSVGPanZoom>
                ))}
            </AutoSizer>
            <StageHandler />
        </div>
    );
}

我的问题是，在this.node的componentDidMount中，当前为null，我不知道为什么。似乎在调用componentDidMount时，该组件无法在DOM中呈现。