React类组件中如何获取渲染返回元素自身的this并传递路径

嘿，我明白你现在遇到的问题了——在React类组件的render方法里，你想给生成的每个<li>元素调用IdFactory.register，但需要让这个函数使用<li>自身的上下文（也就是DOM元素的this），而不是组件类的this。不过这里有个关键的点要先理清：在render阶段，你写的JSX还只是虚拟DOM对象，真实的DOM元素还没被创建出来，所以你没法直接在render里拿到<li>的真实实例，自然也就没法传递它的上下文。

那该怎么解决呢？我们可以借助React的ref来获取真实DOM元素，然后在组件挂载/更新完成后再执行注册逻辑。下面是具体的实现方案：

具体实现步骤 #

1. 在组件中存储每个<li>的ref引用 #

首先在组件的构造函数里创建一个对象，用来存储每个<li>元素的ref：

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    // 用一个对象存储每个li的ref，数组项的value作为key，方便后续对应
    this.liRefs = {};
  }

2. 给每个<li>绑定ref #

在render生成<li>的时候，给每个元素添加一个ref回调，把真实DOM元素存入this.liRefs：

render() {
    const arr = ['one', 'two', 'three'];
    const newArr = arr.map((val) => {
      return (
        <li
          ref={(el) => this.liRefs[val] = el} // 挂载后将真实DOM元素存入liRefs
          key={val}
        >
          {val}
        </li>
      );
    });

    return <ul>{newArr}</ul>;
  }

3. 在生命周期钩子中执行注册逻辑 #

React的componentDidMount钩子会在组件首次挂载完成（真实DOM已生成）后触发，componentDidUpdate会在组件更新完成后触发。我们可以在这两个钩子中遍历存储的ref，调用IdFactory.register：

componentDidMount() {
    this.registerLiElements();
  }

  componentDidUpdate(prevProps, prevState) {
    // 如果你的arr是动态变化的（比如来自props或state），可以在这里判断是否需要重新注册
    // 举个例子：如果arr存在state中，对比前后state的arr是否变化
    // if (this.state.arr !== prevState.arr) {
    //   this.registerLiElements();
    // }
    this.registerLiElements();
  }

  registerLiElements() {
    // 遍历所有存储的li元素
    Object.entries(this.liRefs).forEach(([val, el]) => {
      if (el) {
        // 这里的el就是<li>元素自身的真实DOM实例，getPath可以直接使用它
        IdFactory.register(val, getPath(el));
      }
    });
  }
}

关键细节说明 #

• 为什么用ref？：ref是React提供的用来访问真实DOM元素的方式，只有当元素挂载到DOM树上后，ref回调才会拿到真实的元素实例，这时候你才能获取到元素自身的上下文。
• getPath(el)的上下文：这里传递的el就是<li>元素本身，相当于你要的“元素自身的this”，如果getPath内部需要使用元素的上下文，直接使用el即可（比如el.parentNode这类DOM API）。
• 动态数组的处理：如果你的arr是动态变化的（比如来自父组件props或者自身state），记得在componentDidUpdate里判断数组是否真的变化了，避免不必要的重复注册，提升性能。

额外注意事项 #

• 记得在组件卸载时清理ref，避免内存泄漏：

componentWillUnmount() {
    // 清空ref存储对象
    this.liRefs = {};
  }

• 不要使用ReactDOM.findDOMNode来获取元素，这个API已经被标记为过时，推荐使用ref的方式。

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