Javascript 反应：使用自定义挂钩处理动态参照

我正在构建一个严重依赖动画的应用程序，在使用动态参考和自定义挂钩时遇到了一些问题

所以，我有一个自定义钩子，它添加了一个点击事件监听器，处理一个动画并返回一个ref

const usePageChange=（）=>{
const node=useRef（null）；
const tl=useMemo（（）=>gsap.timeline（{暂停：true}），[]）；
useffect（（）=>{
//设置GSAP时间表
//为了简洁而省略
return（）=>{
tl.kill（）；
};
}, []);
useffect（（）=>{
常数集=（ev）=>{
ev.preventDefault（）；
tl.play（）；
};
const{current}=节点；
当前.addEventListener（'单击'，设置）；
return（）=>{
当前.removeEventListener（'单击'，设置）；
};
}，[tl]）；
返回节点；
};

这适用于非动态的

ref

：

const Home=（）=>{
const elementRef=usePageChange（）；
返回(
);
};

但是，我无法找到一种方法，在不破坏的情况下使用动态

refs

这是我尝试过的（简化），但显然是不正确的。不能在回调中调用React钩子：

useRef（projects.map（（）=>usePageChange（））

const Home=（）=>{
constprojects=useSelector（（state）=>state.projects.data）；
const elementsRef=useRef（projects.map（（）=>usePageChange（））；
返回(
{projects.map（（project，i）=>(
))}
);
};

我真正需要的是一种通过某种方式循环项目长度并动态调用
usePageChange
hook的方法

在这一点上，我不知道直接将单击事件添加到每个动态元素并处理组件内部的动画是否更好。
对于类似的情况，赋予每个列表项状态比尝试在父组件中维护某种子状态数组更有意义

const ProjectListItem = ({ project }) => {
  const elementRef = usePageChange();

  return (
    <img
      alt={`${project.image_alt}`}
      src={`/public/${project.image_path}`}
      ref={elementRef}
    />
  );
}

const Home = () => {
  const projects = ...;

  return (
    <div className='slides'>
      {projects.map(project => (
        <ProjectListItem project={project} />
      ))}
    </div>
  );
};

在单独的组件上处理它更有意义。感谢您的洞察力和澄清！
const usePageChange = () => {
  const [node, setNode] = useState(null);

  // ...

  return { node, setNode };
};

const ProjectListItem = ({ project }) => {
  const { setNode } = usePageChange();

  return (
    <img
      alt={`${project.image_alt}`}
      src={`/public/${project.image_path}`}
      ref={setNode}
    />
  );
}