找不到GSAP目标未定义

debugcn 发表于 Dev

Rom-888

使用useSate时，我可以在两段文本之间切换，从法语到英语。它工作正常，但我想使用GSAP建立更好的过渡。

我的配置无效，因为gsap目标为null或未定义。你能帮我调试那个问题吗？

具有两个按钮的段落组件：

      import React, { useRef, useState } from "react";
import { withRouter } from "react-router-dom";
import gsap from 'gsap';

const LanguageDesc = (props) => {

    const [state, setState] = useState({
        isActive: false,
        languageName: 'English'
    });

    let english = useRef(null);
    let french = useRef(null);

    const handleLanguage = () => {
        if (state.isActive === false) {
            setState({
                isActive: true,
                languageName: 'French'
            })
            gsap.from(english.current, {
                duration: 5,
                opacity: 0,
            })
        } else if (state.isActive === true) {
            setState({
                isActive: false,
                languageName: 'English'
            })
            gsap.from(french.current, {
                duration: 1,
                opacity: 0,
            });
        } else if (state.isActive === false) {
            setState({
                isActive: !state.isActive,
                languageName: 'French'
            })
            gsap.from(english.current, {
                duration: 5,
                opacity: 0,
            })
        }
    };


    return (
        <div>
            {state.isActive ?
                <p ref={english} className="eng-text">{props.state.desc_en}</p>
                : null}
            {state.isActive ?
                null
                : <p ref={french} className="fr-text">{props.state.desc_fr}</p>}
            <button className="btn-language" onClick={handleLanguage} > {state.languageName} text</button>
        </div >
    )

};
export default withRouter(LanguageDesc);

反t

问题是ref={el => (english = el)}和frenchref的用法相同。

由ref返回的useRef引用是在组件的整个生命周期中保存在内存中的单个对象的引用。您必须使用该current属性读取和写入引用。

分配english的值el不会更改英语ref的值，而是将ref替换为el。然后，您可以访问current元素上的属性，该属性（由于它不是ref）将始终为undefined。

english已经是裁判，因此您无需自己处理任务。只要做ref={english}，React就会处理其余的工作。

更新资料

问题仍然存在，因为您的代码在使用ref时仍将其用作元素null。

如果isActive为false，则没有english元素。为true时，没有french元素。但是，每个事件处理程序都取决于同时存在的两个元素。

完全删除这些元素会增加为动画输入/输出过渡设置动画的复杂性。也许您可以isActive用来确定是否显示每个p元素（display: none;），但始终同时渲染两个元素。

() => {
  const handleLanguage = () => {
    if (isActive) {
      gsap
        .from(french.current, {
          duration: 1,
          opacity: 0,
        })
        .eventCallback('onComplete', () => {
          setState({
            isActive: false,
            languageName: 'English',
          });
        });
    } else {
      gsap
        .from(english.current, {
          duration: 5,
          opacity: 0,
        })
        .eventCallback('onComplete', () => {
          setState({
            isActive: true,
            languageName: 'French',
          });
        });
    }
  };

  return (
    <div>
      <p
        ref={english}
        style={{ display: isActive ? 'none' : 'initial' }}
        className="eng-text"
      >
        {desc_en}
      </p>
      <p
        ref={french}
        style={{ display: isActive ? 'initial' : 'none' }}
        className="fr-text"
      >
        {desc_fr}
      </p>
      <button className="btn-language" onClick={handleLanguage}>
        {' '}
        {state.languageName} text
      </button>
    </div>
  );
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。