传递nodeRef prop时CSSTransition组件不起作用

问题描述

我有一个Csstransition组件，该组件包装了Material-UI Typography组件。最初，我完成了文档需要做的所有工作，并且动画起作用了，但是，我得到了findDOMNode is deprecated in StrictMode. findDomNode was passed an instance of Transition which is inside StrictMode. Instead,add a ref directly to the element you want to reference.的警告，然后我使用useRef(null)来获取引用，以作为道具传递给Csstransition组件。 （这样做的参考：findDOMNode warnings with CSSTransition components）。错误消失了，但是现在动画不起作用了。当我通过nodeRef道具并打开开发工具时，我发现Csstransition不应用fade类。我对于如何使用ref使其正常工作感到迷惑。

import '../styling/css/copyMessageAnimation.css'

export default function SummarySection({ ... }) {

  const sentenceCount = sentences.length
  const [ copyMessage,setcopyMessage ] = useState('')

  const nodeRef = useRef(null)
  
  const copyText = () => { ... }

  const executecopyAndFeedback = () => {
    const isSuccessfulcopy = copyText()
    const message = isSuccessfulcopy ? 'copy successful!' : 'copy unsuccessful. Your browser may not support it.'
    setcopyMessage(message)
    setTimeout(() => {
      setcopyMessage('')
    },2000)
  }
  
  return (
    <div className='resultsSection'>
      {sentenceCount !== 0 &&
        <div className='summarySectionCol'>
          <div className='copyButtonRow'>

            <div className='copyMsgCol'>
              <Csstransition nodeRef={nodeRef}
                // linter complains about trying to use a string as a boolean 
                in={copyMessage !==''}
                timeout={100}
                classNames='fade'
              >
                <Typography variant='body2' key={copyMessage}>
                  {copyMessage}
                </Typography>
              </Csstransition>
            </div>
            <Button
              variant='outlined'
              component='span'
              color='secondary'
              startIcon={<FilecopyOutlinedIcon />}
              onClick={() => executecopyAndFeedback()}
            >
              copy
            </Button>

          </div>
        </div>
      </div>

copyMessageAnimation.css

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity .5s;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity .8s;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）