通过 React 钩子的组件动画。 Gsap 没有反应

Question

我对我的组件组织有点迷茫，我在为组件显示设置动画时遇到了问题。

我使用handleCart函数来切换显示状态，然后通过道具，我想应用一个gsap动画来显示或隐藏购物车组件，但它不起作用。 在反应开发工具中，我看到当我点击购物车按钮时购物车组件中的状态会发生变化，但没有任何反应......

购物车按钮是标题：

const Header = ({ history }) => {

    const [displayCart, setDisplayCart] = useState(false);
    
    const handleCart = () => {
        if (displayCart === false) {
          setDisplayCart(!displayCart);
        } else if (displayCart === true) {
          setDisplayCart(false);
        };
      }
    
      return (
        <header>
          <Cart display={displayCart} />
        </header>
      );
    };

购物车组件应显示 gsap 动画：

const Cart = (props) => {

    let cartAnim = useRef(null);

   useEffect(() => {

        if (props.display === true) {
            gsap.to(cartAnim, {
                duration: 1,
                width: '30vw',
                ease: 'power3.inOut',
            });
        } else if (props.display === false) {
            gsap.to(cartAnim, {
                duration: 1,
                ease: 'power3.inOut',
                width: '0vw',
            });
        }
    }, [])


    return (
        <div ref={el => (cartAnim = el)} className="cart">
            <div className="menu">
                <button>Close</button>
            </div>
            <h1 id="panier">Panier</h1>

Answer 1

我自己找到了解决方案。 对不起。

我需要在 useEffect 函数末尾的数组中添加道具：

 useEffect(() => {

        if (props.display === true) {
            gsap.to(cartAnim, {
                duration: 1,
                width: '30vw',
                ease: 'power3.inOut',
            });
        } else if (props.display === false) {
            gsap.to(cartAnim, {
                duration: 1,
                ease: 'power3.inOut',
                width: '0vw',
            });
        }
    }, [props])