React中元素渲染完成后如何触发函数并通过createRef获取元素？

问题场景 #

你在类组件中使用React.createRef()尝试获取DOM元素，但在render函数中直接调用someFunction()时，控制台打印this.myRef.current为null；而通过按钮点击触发该函数时，却能正常获取到元素。

原代码示例：

someFunction = () => {
  let element = this.myRef.current;
  console.log(element)
}

render(){
  return(
     <FlexView>
        <div ref={this.myRef}>
          some text here 
        </div>
        {this.someFunction()}
     </FlexView>
  )
}

按钮点击能正常工作的代码（已修正一处写法错误）：

render(){
  return(
     <FlexView>
        <div ref={this.myRef}>
          some text here 
        </div>
        <button onClick={this.someFunction}>click-here</button>
     </FlexView>
  )
}

注：原按钮代码中onClick={this.someFunction()}会在render阶段直接执行函数，正确写法是传递函数引用onClick={this.someFunction}。

原因分析 #

这是React生命周期的特性导致的：

• render函数执行时，React仅在生成虚拟DOM，还未将真实DOM挂载到页面，此时ref的current属性还未被赋值，所以拿到null。
• 按钮点击事件触发时，组件已完成挂载（componentDidMount钩子已执行），真实DOM已渲染完成，ref已指向对应DOM元素，因此能正常获取。

解决方法 #

根据需求，有两种常见的正确实现方式：

1. 组件挂载完成后调用函数 #

类组件的componentDidMount钩子会在组件首次挂载（真实DOM渲染完成）后执行，此时ref已可以正常使用：

constructor(props) {
  super(props);
  // 初始化ref
  this.myRef = React.createRef();
}

componentDidMount() {
  // 挂载完成后调用函数
  this.someFunction();
}

someFunction = () => {
  let element = this.myRef.current;
  console.log(element); // 此时能正常获取div元素
}

render(){
  return(
     <FlexView>
        <div ref={this.myRef}>
          some text here 
        </div>
     </FlexView>
  )
}

2. 仅在用户交互事件中调用函数 #

如果需求是在用户交互（如点击、滚动）时获取元素，保持按钮点击的写法即可，核心是不要在render中直接执行函数，而是将函数引用传递给事件回调。

内容的提问来源于stack exchange，提问作者Darkness