Javascript 通过React挂钩创建组件动画。Gsap没有'；不回答

我有点迷失在我的组件组织中，我有一个问题来设置组件显示的动画

我使用handleCart函数切换显示状态，然后通过道具应用gsap动画来显示或隐藏购物车组件，但它不起作用。 在react-dev工具中，我看到当我点击cart按钮时，cart组件中的状态发生了变化，但什么都没有发生

“购物车”按钮是标题上的按钮：

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>
      );
    };

const头=（{history}）=>{
const[displayCart，setDisplayCart]=useState（false）；
常量handleCart=（）=>{
如果（displayCart==false）{
setDisplayCart（！displayCart）；
}else if（displayCart==真）{
setDisplayCart（假）；
};
}
返回(
);
};

购物车组件应与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>

const Cart=（道具）=>{
让cartAnim=useRef（null）；
useffect（（）=>{
如果（props.display==true）{
gsap.to（卡塔尼姆、{
持续时间：1，
宽度：“30vw”，
轻松：'power3.inOut'，
});
}else if（props.display==false）{
gsap.to（卡塔尼姆、{
持续时间：1，
轻松：'power3.inOut'，
宽度：“0vw”，
});
}
}, [])
返回(
（cartAnim=el）}className=“cart”>
接近
帕尼尔

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

我需要在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]) 

---

解决并分享答案的荣誉