带有 CSSTransition 组件的 findDOMNode 警告

Posted 2023-04-14

技术标签:

【中文标题】带有 CSSTransition 组件的 findDOMNode 警告【英文标题】：findDOMNode warnings with CSSTransition components 【发布时间】：2020-07-11 18:47:51 【问题描述】：

“反应”：“^16.13.1” “反应过渡组”：“^4.3.0”

  <React.StrictMode>
    <Router>
        <App />
    </Router>
  </React.StrictMode>

大家好。

我遇到了 findDOMNode 警告，在互联网上找不到正确的解决方案。

index.js:1 警告：在 StrictMode 中不推荐使用 findDOMNode。 findDOMNode 被传递了一个在 StrictMode 内部的 Transition 实例...

我从关闭文档here 复制的这个例子，点击按钮，同样的错误出现。

const Toolbar = (props) => 
    const [inProp, setInProp] = useState(false);
    return (
        <div>
            <CSSTransition in=inProp timeout=200 classNames="my-node">
                <div>
                    "I'll receive my-node-* classes"
                </div>
            </CSSTransition>
            <button type="button" onClick=() => setInProp(true)>
                Click to Enter
            </button>
        </div>
    )
;

互联网上的解决方案建议尝试 createRef（我使用了 usePef 钩子），但使用 Transitions，它不起作用。

似乎 React.StrictMode 会抛出这样的警告，直到这个库的补丁被合并，但我仍然没有看到创建的 issue

对于如何解决问题的任何帮助或建议，我将不胜感激

【问题讨论】：

【参考方案1】：

他们从版本 4.4.0 中修复了该错误。

要解决这个问题，可以将nodeRef 传递给CSSTransition

const Toolbar = (props) => 
    const [inProp, setInProp] = useState(false);
    const nodeRef = useRef(null)
    return (
        <div>
            <CSSTransition in=inProp nodeRef=nodeRef timeout=200 classNames="my-node">
                <div ref=nodeRef>
                    "I'll receive my-node-* classes"
                </div>
            </CSSTransition>
            <button type="button" onClick=() => setInProp(true)>
                Click to Enter
            </button>
        </div>
    )
;

我希望这会有所帮助。

【讨论】：

您忘记将 ref=nodeRef 添加到子组件。我觉得这个sn-p的代码是不完整的，我试了一下没有成功。。正确的是这里***.com/questions/62187461/… 我没有收到更多警告但过渡消失了？【参考方案2】：

对于使用基于类的组件的任何人，建议改用createRef。

示例：