如何获取React中ref的名称并将其存入state？

Hey there! 针对你提出的需求——从<div ref={this.divRef}><SomeComponent /></div>这段JSX里获取ref关联DOM的名称，并存入组件state，咱们可以这样一步步实现：

核心思路 #

首先要明确：this.divRef是通过React.createRef()创建的ref对象，它的current属性会在组件挂载完成后指向对应的真实DOM元素。我们只需要在DOM渲染完成的生命周期钩子中，访问这个DOM元素的name属性，再通过setState把它存入state即可。

完整类组件实现示例 #

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化ref，关联目标DOM
    this.divRef = React.createRef();
    // 初始化存储breakpoints的state
    this.state = {
      breakpoints: []
    };
  }

  componentDidMount() {
    // 先判断ref是否已关联到真实DOM，避免空指针异常
    if (this.divRef.current) {
      const targetDom = this.divRef.current;
      this.setState({
        breakpoints: [
          {
            name: targetDom.name, // 获取DOM元素的name属性
            position: targetDom.getBoundingClientRect().bottom // 获取元素底部的位置信息
          }
        ]
      }, () => {
        // setState是异步操作，回调里能确保state已更新完成
        console.log(targetDom, '当前关联的DOM元素');
        console.log(this.state.breakpoints, '更新后的breakpoints状态');
      });
    }
  }

  render() {
    // 务必给目标div加上name属性，否则targetDom.name会是空字符串
    return (
      <div ref={this.divRef} name="section-container">
        <SomeComponent />
      </div>
    );
  }
}

关键注意事项 #

• 给DOM元素设置name属性：如果你的<div>没有显式设置name，那么targetDom.name会返回空字符串，所以一定要在JSX中添加name="xxx"
• 非空判断不可少：在访问this.divRef.current前必须做判断，不然在组件未挂载完成时（比如render阶段）访问会抛出错误
• 利用setState的回调：如果需要在state更新完成后执行逻辑（比如打印、触发其他操作），一定要放在setState的第二个参数里，因为setState是异步执行的

函数组件版本（补充） #

如果你使用的是函数组件，逻辑类似，只需要用useRef和useEffect替代类组件的API：

import React, { useRef, useState, useEffect } from 'react';

function YourFunctionalComponent() {
  const divRef = useRef(null);
  const [breakpoints, setBreakpoints] = useState([]);

  // useEffect空依赖数组，确保只在组件挂载完成后执行一次
  useEffect(() => {
    if (divRef.current) {
      const targetDom = divRef.current;
      setBreakpoints([
        {
          name: targetDom.name,
          position: targetDom.getBoundingClientRect().bottom
        }
      ]);
      console.log(targetDom, '当前关联的DOM元素');
    }
  }, []);

  return (
    <div ref={divRef} name="section-container">
      <SomeComponent />
    </div>
  );
}

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