我想使用 Tweenmax.staggerFrom 为数组中的每个元素设置动画。目前，我创建了此工作示例

import React,{ useRef,useEffect createRef } from 'react';
import { Tweenmax } from 'gsap';

const AnimateView = () => {
  const data = [
    { title: 'Title 1',value: 1000 },{ title: 'Title 2',value: 1100 },{ title: 'Title 3',value: 1200 },];

  const elementsref = useRef(data.map(() => createRef()));

  useEffect(() => {
    const elements = elementsref.current.map(el => el.current);

    Tweenmax.staggerFrom(elements,1,{ scale: 0 },0.3);
  },[]);

  return (
    <>
      {data.map((item,index) => (
        <div ref={elementsref.current[index]}>{item.title}</div>
      ))}
    </>
  );
};

export default AnimateView;

区别在于我希望从服务器获取 data 数组。我无法弄清楚为什么在 elementsref 中没有附加的引用。您可以在下面查看我想要实现的目标。

import React,useEffect createRef } from 'react';
import { Tweenmax } from 'gsap';
import { connect } from 'react-redux';
import { fetchData } from 'actions';

const AnimateView = ({ combineFetching,income }) => {

  const elementsref = useRef(income.length && income.map(() => createRef()));

  useEffect(() => {
    const elements = elementsref.current.map(el => el.current);

    Tweenmax.staggerFrom(elements,[]);

  return (
    <>
      <button onClick={fetchData}>Click</button>
      {income.map((item,index) => (
        <div ref={elementsref.current[index]}>{item.title}</div>
      ))}
    </>
  );
};

const mapDispatchToProps = state => ({
  income: state.budget.income,});

export default connect(
  mapDispatchToProps,{ fetchData },)(AnimateView);

在单击时，我想从数据库中获取数据并为数组中的每个元素设置动画。