使用 CSSTransition 组件的 findDOMNode 警告

Question

"react": "^16.13.1" "react-transition-group": "^4.3.0"

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

大家好

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

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode...

这个例子是我从off docs 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

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

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

希望对您有所帮助。

Answer 2

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

示例：

const nodeRef = React.createRef(null);

我遇到了同样的问题，而且正如@warkentien2所说，你还需要在子组件中添加引用，否则没有任何反应。

使用 CSSTransition 组件的 findDOMNode 警告

findDOMNode warnings with CSSTransition components

strict-mode

reactjs

deprecation-warning

react-component

react-ref