通过Props方法传递子组件Ref给父组件：是否存在风险或为反模式？

你的方案是否存在问题/属于反模式？ #

• 你的方案不属于反模式，是React中传递Ref的合法方式之一，本质是通过回调函数传递Ref引用，属于官方认可的“回调Ref”变体用法。
• 潜在需要注意的点：
  • 类型不够严谨：代码中大量使用any会丢失TypeScript的类型检查能力，建议定义具体类型（比如React.RefObject<HTMLLIElement>）。
  • 子组件卸载后的Ref有效性：如果子组件卸载后，父组件仍持有旧Ref并调用相关方法（如scrollIntoView），会触发报错，建议在子组件卸载时通知父组件清理无效Ref，或在父组件中增加有效性判断。
  • 重复调用风险：若子组件多次触发onListItemClick，父组件会多次接收Ref，需确保逻辑处理具备幂等性（你的场景是点击触发单次调用，影响不大）。

其他实现方式 #

1. 回调Ref（官方推荐的列表场景方案） #

父组件直接传递回调Ref给子组件，子组件将DOM元素绑定到该回调，无需额外在子组件内部声明Ref：

// Child组件
export const Child: React.FC<{ 
  item: { name: string }; 
  key: number; 
  ref: React.Ref<HTMLLIElement>;
  onClick: () => void;
}> = ({ item, key, ref, onClick }) => {
  return (
    <li ref={ref} onClick={onClick}>
      {key} - {item.name}
    </li>
  );
};

// Parent组件
export const Parent: React.FC<{ data: { name: string }[] }> = ({ data }) => {
  // 存储所有子项的Ref，用索引或item唯一标识作为key
  const itemRefs = useRef<(HTMLLIElement | null)[]>([]);

  const handleItemClick = (index: number) => {
    const element = itemRefs.current[index];
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <ol>
      {data.map((item, index) => (
        <Child
          key={index}
          item={item}
          ref={(el) => (itemRefs.current[index] = el)}
          onClick={() => handleItemClick(index)}
        />
      ))}
    </ol>
  );
};

2. useImperativeHandle + forwardRef（适合暴露自定义方法的场景） #

如果不需要直接传递DOM元素，而是让子组件暴露特定方法给父组件，可使用该方案：

// Child组件
const Child = React.forwardRef<{ 
  scrollToSelf: () => void;
}, { 
  item: { name: string }; 
  key: number;
}>(({ item, key }, ref) => {
  const childRef = useRef<HTMLLIElement>(null);

  useImperativeHandle(ref, () => ({
    scrollToSelf: () => {
      if (childRef.current) {
        childRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  }));

  return (
    <li ref={childRef}>{key} - {item.name}</li>
  );
});

// Parent组件
export const Parent: React.FC<{ data: { name: string }[] }> = ({ data }) => {
  const itemRefs = useRef<(ReturnType<typeof Child> | null)[]>([]);

  const handleItemClick = (index: number) => {
    itemRefs.current[index]?.scrollToSelf();
  };

  return (
    <ol>
      {data.map((item, index) => (
        <Child
          key={index}
          item={item}
          ref={(el) => (itemRefs.current[index] = el)}
          onClick={() => handleItemClick(index)}
        />
      ))}
    </ol>
  );
};

3. 状态管理（适合多组件共享Ref场景） #

如果需要在多个组件间共享子项Ref，可借助React Context统一管理，但对于简单的父子列表场景，这种方式属于过度设计，不推荐。

总结 #

你的现有方案完全可行，只要补充类型定义、处理好Ref的生命周期即可。如果追求更贴合官方规范的写法，回调Ref或useImperativeHandle结合forwardRef是更优选择。

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