React中如何用useRef从Carousel组件触发Box组件点击事件？

当前实现的核心问题 #

1. 单个ref复用导致指向混乱：你把同一个clickRef传给了CarouselComponent的所有项，最终clickRef.current只会指向最后一个渲染的Carousel元素，完全达不到对应Box按钮的目的。
2. ref指向逻辑错误：你试图调用clickRef.current.click()，但这个ref指向的是Carousel的项元素，而非Box里的按钮，自然会抛出click is not a function的错误。
3. 语法错误：useEffect的依赖项写成了[data.id)，缺少闭合的]，会直接导致代码报错。
4. 逻辑方向颠倒：应该是点击Carousel项时主动触发对应Box按钮的操作，而非监听data.id变化去反向触发。

可行解决方案 #

方案1：DOM直接操作（适合快速理解） #

通过元素ID定位Box里的按钮，直接触发点击事件，适合初学者快速验证逻辑：

修改BoxComponent.js

const BoxComponent = () => {
  const { data, setData } = useContext(BoxContext);

  const onClickHandler = (id) => {
    // 根据id更新对应数据
    const targetItem = data.find(item => item.id === id);
    setData(targetItem);
  };

  // 传给Carousel的点击处理函数
  const handleCarouselItemClick = (id) => {
    const button = document.getElementById(id);
    if (button) button.click();
  };
  
  return (
    <>
      {data.map(item => (
        <div 
          key={item.id}
          id={item.id} 
          onClick={() => onClickHandler(item.id)}
        >
          Button {item.id.split('-')[1]}
        </div>
      ))}
      <CarouselComponent onItemClick={handleCarouselItemClick} />
    </>
  );
};

修改CarouselComponent.js

const CarouselComponent = ({ onItemClick }) => {
  const data = [
    { id: 'test-01', value: { text: 'foo 01' } },
    { id: 'test-02', value: { text: 'foo 02' } },
    { id: 'test-03', value: { text: 'foo 03' } }
  ];

  return (
    <>
      {data.map(item => (
        <div 
          key={item.id}
          data-id={item.id} 
          onClick={() => onItemClick(item.id)}
        >
          Item {item.id.split('-')[1]}
        </div>
      ))}
    </>
  );
};

方案2：状态驱动（React推荐方式） #

避免直接操作DOM，通过共享回调函数同步状态，更符合React的设计理念：

修改BoxComponent.js

const BoxComponent = () => {
  const { data, setData } = useContext(BoxContext);

  const updateActiveItem = (id) => {
    const targetItem = data.find(item => item.id === id);
    if (targetItem) setData(targetItem);
  };
  
  return (
    <>
      {data.map(item => (
        <div 
          key={item.id}
          id={item.id} 
          onClick={() => updateActiveItem(item.id)}
        >
          Button {item.id.split('-')[1]}
        </div>
      ))}
      <CarouselComponent onItemSelect={updateActiveItem} />
    </>
  );
};

修改CarouselComponent.js

const CarouselComponent = ({ onItemSelect }) => {
  const data = [
    { id: 'test-01', value: { text: 'foo 01' } },
    { id: 'test-02', value: { text: 'foo 02' } },
    { id: 'test-03', value: { text: 'foo 03' } }
  ];

  return (
    <>
      {data.map(item => (
        <div 
          key={item.id}
          data-id={item.id} 
          onClick={() => onItemSelect(item.id)}
        >
          Item {item.id.split('-')[1]}
        </div>
      ))}
    </>
  );
};

关于useRef的思路补充 #

你的思路方向没错，但用错了场景：useRef适合存储单个DOM元素或持久化值，若要存储多个元素，应该用useRef([])或useRef({})分别记录每个元素的ref。不过在这个场景下，状态驱动的方式比直接操作DOM更优雅，也更符合React的最佳实践。

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