带有 CSSTransition 组件的 findDOMNode 警告 [英] findDOMNode warnings with CSSTransition components

问题描述

反应":^16.13.1"反应转换组":^4.3.0"

 <路由器><应用程序/></路由器></React.StrictMode>

大家好.

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

<块引用>

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

这个例子是我从文档外复制的这里，然后点击按钮，出现同样的错误.

const Toolbar = (props) =>{const [inProp, setInProp] = useState(false);返回 (<div><CSSTransition in={inProp} timeout={200} classNames="my-node"><div>{我会收到 my-node-* 类"}

</CSSTransition><button type="button" onClick={() =>setInProp(true)}>点击进入

)};

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

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

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

解决方案

他们修复了 4.4.0.

修复可以将nodeRef传递给CSSTransition

的问题

const Toolbar = (props) =>{const [inProp, setInProp] = useState(false);const nodeRef = useRef(null)返回 (<div><CSSTransition in={inProp} nodeRef={nodeRef} timeout={200} classNames=my-node"><div ref={nodeRef}>{我将收到 my-node-* 类"}

</CSSTransition><按钮类型=按钮"onClick={() =>setInProp(true)}>点击进入

)};

我希望这会有所帮助.

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

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

Hi, everyone.

I faced with findDOMNode warning and can't find the right solution on the internet.

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

This example I copied from off docs here and on click of the button, the same error appears.

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

The solutions from the internet suggested trying createRef (I used usePef hook) but with Transitions, it didn't work.

It seems that React.StrictMode will throw a warning like this until the patch for this library will be merged, but still, I don't see the created issue

I will be grateful for any help or proposal of how to solve the issue

解决方案

They fixed that bug from version 4.4.0.

To fix that can pass nodeRef to 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>
    )
};

I hope that will be helpful.

这篇关于带有 CSSTransition 组件的 findDOMNode 警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！