带有 CSSTransition 组件的 findDOMNode 警告

IT技术 reactjs react-component deprecation-warning react-ref strict-mode
2021-05-16 08:31:56

“react”：“^16.13.1”“react转换组”：“^4.3.0”

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

大家好。

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

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

这个例子是我从这里的off docs复制的，点击按钮，出现了同样的错误。

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 会抛出这样的警告，直到该库的补丁被合并，但仍然没有看到创建的问题

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

2个回答

他们修复了版本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>
    )
};

我希望这会有所帮助。

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

例子：

const nodeRef = React.createRef(null);

我遇到了同样的问题，而且正如@warkentien2 所说，您还需要在子组件中添加引用，否则什么也不会发生。

其它你可能感兴趣的问题
上一篇帮助诊断 Z 带 下一篇从图像中查找 OpenSCAD 代码