React组件中如何在componentDidUpdate中重新生成createRef？

我太懂这种refs突然变null的挫败感了！你遇到的问题核心在于：构造函数只会在组件初始化时执行一次，当props.events更新后，构造函数不会重新运行，原来的eventRefs数组要么长度和新的events不匹配，要么对应的DOM元素已经被React销毁重建了。而且你在componentDidUpdate里重新生成refs的话，这些新refs根本没和任何DOM元素绑定，自然current还是null。

下面给你几个靠谱的解决方案，都是类组件里能用的：

方案一：用回调Refs动态追踪DOM元素 #

回调Refs比createRef更灵活，它能在每次渲染时更新，直接把DOM元素存入state数组里，这样不管props怎么变，你都能拿到最新的refs：

class EventScrollComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      eventRefs: []
    };
    this.scrollRef = React.createRef();
    this.mapRef = React.createRef();
  }

  componentDidUpdate(prevProps) {
    if (this.props.events !== prevProps.events) {
      // 现在可以访问最新的refs了
      const targetRef = this.state.eventRefs[2]; // 比如取第三个事件的ref
      if (targetRef) {
        targetRef.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }

  render() {
    return (
      <div ref={this.scrollRef}>
        <div ref={this.mapRef}>
          {this.props.events.map((event, index) => (
            <div 
              key={event.id} // 一定要用稳定唯一的key，别用index！
              ref={(el) => {
                // 更新refs数组，确保每个位置对应正确的DOM元素
                const updatedRefs = [...this.state.eventRefs];
                updatedRefs[index] = el;
                this.setState({ eventRefs: updatedRefs });
              }}
              className="event-item"
            >
              {event.title}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

这个方案的好处是不需要手动监听props变化，回调会自动在DOM元素挂载/卸载时触发，保证refs数组始终和最新的渲染结果同步。

方案二：在Props更新时重新创建Ref数组（类组件传统方式） #

如果你更习惯用createRef，可以在props变化时重新生成refs数组，但要注意必须保证渲染时使用最新的refs，同时用稳定的key避免React错误复用DOM：

class EventScrollComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lastEvents: props.events,
      eventRefs: props.events.map(() => React.createRef())
    };
    this.scrollRef = React.createRef();
    this.mapRef = React.createRef();
  }

  // React 16.3+ 推荐用这个静态方法替代componentWillReceiveProps
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.events !== prevState.lastEvents) {
      return {
        lastEvents: nextProps.events,
        // 每次events更新时，重新创建对应的refs
        eventRefs: nextProps.events.map(() => React.createRef())
      };
    }
    return null;
  }

  componentDidUpdate(prevProps) {
    if (this.props.events !== prevProps.events) {
      // 现在用this.state.eventRefs访问最新的refs
      if (this.state.eventRefs[0]?.current) {
        this.state.eventRefs[0].current.scrollIntoView();
      }
    }
  }

  render() {
    return (
      <div ref={this.scrollRef}>
        <div ref={this.mapRef}>
          {this.props.events.map((event, index) => (
            <div 
              key={event.id} // 关键：稳定key避免DOM复用错误
              ref={this.state.eventRefs[index]}
              className="event-item"
            >
              {event.title}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

这里把eventRefs存在state里，通过getDerivedStateFromProps在props变化时更新，确保渲染时用的是最新的refs数组，这样componentDidUpdate里就能拿到有效的DOM引用了。

关键注意点 #

1. 永远不要用index作为列表项的key：如果events数组的顺序变化，React会错误地复用旧的DOM元素，导致refs绑定混乱。一定要用每个event独有的id或者其他稳定标识。
2. 避免在componentDidUpdate里直接修改refs数组：除非你能确保修改后的refs能被下一次渲染使用，否则只是白忙活，因为渲染逻辑还是用的旧 refs。

按照上面的方法改，应该就能解决你refs变null的问题了！

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