React ref回调更新this以更新子组件Props无效问题排查

首先明确：ref回调的执行时机确实晚于componentDidMount/componentDidUpdate，这是React的正常生命周期行为——DOM元素挂载/更新完成后，ref回调才会被调用，所以你的日志顺序是符合预期的，不存在生命周期误解。

你当前代码的核心问题是：直接修改this.refsData的属性不会触发组件重渲染。React仅在组件的state或props的引用发生变化时，才会触发重新渲染。你直接修改了this.refsData内部的属性，但未改变this.refsData本身的引用，因此ComponentTwo无法感知数据变化，自然不会重新渲染。

修复方案 #

1. 将refsData迁移到组件的state中，通过setState更新数据以触发重渲染：

class YourComponent extends React.Component {
  state = {
    refsData: {},
    list: [] // 假设你的list数据存放在state中
  };

  refCb = (ref, name) => {
    // 处理组件卸载时ref为null的情况
    if (!ref) {
      this.setState(prevState => {
        const newRefsData = {...prevState.refsData};
        delete newRefsData[name];
        return {refsData: newRefsData};
      });
      return;
    }

    const { x, y } = ref.getBoundingClientRect();
    this.setState(prevState => ({
      refsData: {
        ...prevState.refsData,
        [name]: { x, y }
      }
    }));
  };

  render () {
    return (
      <div>
        <ComponentOne>
          {this.state.list.map((listItem) => (
            <div key={listItem.name} ref={(itemRef) => this.refCb(itemRef, listItem.name)}></div>
          ))}
        </ComponentOne>
        <ComponentTwo refsData={this.state.refsData} />
      </div>
    );
  }
}

2. 针对Styled Component的ref问题：
   若需要获取ComponentOne内部的DOM元素，可使用React.forwardRef包装Styled Component，将ref转发到内部基础DOM元素：

import styled from 'styled-components';

const StyledComponentOne = styled.div`
  // 你的样式定义
`;

const ComponentOne = React.forwardRef((props, ref) => (
  <StyledComponentOne ref={ref} {...props} />
));

这样你就能直接获取到ComponentOne对应的DOM元素ref，而非组件实例。

3. 额外注意事项：

• 列表渲染必须添加唯一key属性，避免React渲染异常；
• getBoundingClientRect获取的是视口相对坐标，页面滚动后会失效，若需父元素相对坐标，需结合父元素的getBoundingClientRect计算。

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