Reactjs 如何动态设置多个Spring实例？

在试图找出如何设置多个弹簧时遇到了一点问题，弹簧将按链顺序设置动画

其思想是获取数组中存在的每个路径的长度，这发生在

useffect

中。在获取长度时，我想使用它们设置单独的弹簧，这些弹簧一起构成SVG箭头的动画

按预期工作（单击视口中的任意位置，箭头将设置动画）

代码当前看起来像这样（）：

常量箭头数据={
笔划：“红色”，
视图框：“0 0 278 549”，
路径：[
“M204.974 2.775c57.056 87.536 81.796 175.997 58.823 266.51C223.401 428.443-11.634 400.007 6.5 312.033 24.638 224.062 190 252 190 356c0 69.333-8 128.617-24 177.852”，
“M223.324 500.772l-60.288 39.978-26.437-68.621”，
]
};
常数箭头=（）=>{
const[draw，setDraw]=useState（false）；
常量[PathLength，SetPathLength]=useState（[]）；
//路径参考
const pathsRef=useRef（arrowData.path.map（（）=>createRef（））；
//用于链接的弹簧动画参照
const springsRef=useRef（arrowData.path.map（（）=>createRef（））；
useffect（（）=>{
const calculatedPathLength=路径ref.current.map(
ref=>ref.current.getTotalLength（）
);
设置路径长度（计算路径长度）；
//在这里为链接动画动态设置多个弹簧，但如何设置？
}，[SetPathLength]）；
返回(
setDraw（draw=>！draw）}>
{arrowData.path.map（（路径，索引）=>(
const arrowData = {
  stroke: 'red',
  viewBox: '0 0 278 549',
  paths: [
    'M204.974 2.775c57.056 87.536 81.796 175.997 58.823 266.51C223.401 428.443-11.634 400.007 6.5 312.033 24.638 224.062 190 252 190 356c0 69.333-8 128.617-24 177.852', 
    'M223.324 500.772l-60.288 39.978-26.437-68.621',
  ]
};

const Arrow = () => {
  const [draw, setDraw] = useState(false);
  const [pathLengths, setPathLengths] = useState([]);

  // path refs
  const pathsRef = useRef(arrowData.paths.map(() => createRef()));

  // spring animation refs for chaining
  const springsRef = useRef(arrowData.paths.map(() => createRef()));


  useEffect(() => {
    const calculatedPathLengths = pathsRef.current.map(
      ref => ref.current.getTotalLength()
    );
    setPathLengths(calculatedPathLengths);

    // dynamically setup multiple springs for chained animation here, but how?
  }, [setPathLengths]);


  return (
    <div style={{pointerEvents: 'auto'}} onClick={() => setDraw(draw => !draw)}>
      <svg
        viewBox={arrowData.viewBox}
        stroke={arrowData.stroke}
        fill="none"
        strokeWidth="10"
      >
        {arrowData.paths.map((path, index) => (
          <animated.path 
            key={index}
            ref={pathsRef.current[index]}
            strokeDasharray={pathLengths[index]}
            strokeDashoffset="0" // <- value to be animated
            d={path}
          />
        ))}
      </svg>
    </div>
  )
}