如何在React中访问指定元素？附相关React组件代码示例

Hey there! 我看你在尝试在React类组件里获取指定DOM元素的引用，你的代码里有个小误区——把ref存在state里完全没必要，而且用法也不对。咱们来一步步修正，看看正确的实现方式：

方法一：使用React.createRef()（React 16.3+官方推荐） #

这是React官方推荐的现代方式，用法简洁直观：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Titulo extends Component{
  render(){
    return ( <h1>Hola Mundo</h1> );
  }
}

class Contenido extends Component{
  constructor(props){
    super(props);
    // 创建一个ref对象，挂载到类实例上（不要存state！）
    this.myDivRef = React.createRef();
  }

  // 组件挂载完成后，就能安全访问DOM元素了
  componentDidMount() {
    // 通过ref的current属性拿到对应的DOM节点
    console.log('获取到的div元素:', this.myDivRef.current);
    // 举个例子：修改元素样式
    this.myDivRef.current.style.backgroundColor = '#f5f5f5';
  }

  render(){
    return ( 
      <div ref={this.myDivRef} className="contenido">
        <p className="parrafo"> Este es el contenido principal de la página </p>
      </div> 
    );
  }
}

// 渲染根组件
ReactDOM.render(
  <div>
    <Titulo />
    <Contenido />
  </div>,
  document.getElementById('root')
);

关键点解释： #

• React.createRef()会生成一个专门存储DOM引用的对象，直接挂载到类实例上即可，不需要放进state。
• 只有当组件挂载完成后（比如componentDidMount生命周期钩子），ref.current才会指向真实的DOM元素，避免出现null的情况。

方法二：使用回调Ref（灵活可控的传统方式） #

如果你需要更精细的控制（比如元素挂载/卸载时执行额外逻辑），可以用回调ref：

class Contenido extends Component{
  constructor(props){
    super(props);
    // 初始化存储DOM元素的变量
    this.myDivRef = null;
    // 绑定回调函数的this，避免作用域丢失
    this.setDivRef = this.setDivRef.bind(this);
  }

  // 回调函数：当DOM元素挂载时，React会自动把元素传入
  setDivRef(element) {
    this.myDivRef = element;
    // 这里可以直接做一些初始化操作，比如：
    if (element) {
      console.log('元素刚挂载:', element);
    } else {
      console.log('元素被卸载了');
    }
  }

  componentDidMount() {
    if (this.myDivRef) {
      // 访问DOM元素并操作
      this.myDivRef.style.color = '#2c3e50';
    }
  }

  render(){
    return ( 
      <div ref={this.setDivRef} className="contenido">
        <p className="parrafo"> Este es el contenido principal de la página </p>
      </div> 
    );
  }
}

关键点解释： #

• 回调ref是一个函数，React会在DOM元素挂载时传入元素对象，卸载时传入null，适合做一些挂载/卸载时的逻辑处理。
• 同样不需要把ref存进state，直接挂载到类实例上即可。

重要提醒 #

• 不要把Ref存在state中：Ref是用来引用DOM或组件实例的工具，不属于组件的状态数据。React的state应该用来管理影响UI渲染的可变数据，Ref和State是完全独立的概念。
• 注意访问时机：一定要在组件已经挂载（componentDidMount）或更新完成（componentDidUpdate）后访问Ref，否则可能拿到null。

内容的提问来源于stack exchange，提问作者Fernando Bravo Diaz