“ react ”:“^16.13.1”
“ react 过渡组”:“^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...
这个例子是我从非文档 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 钩子(Hook)),但使用转换,它不起作用。
似乎 React.StrictMode 会抛出这样的警告,直到该库的补丁被合并,但我仍然看不到创建的 issue
对于如何解决问题的任何帮助或建议,我将不胜感激
最佳答案
他们从版本 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>
)
};
我希望这会有所帮助。
关于reactjs - 带有 CSSTransition 组件的 findDOMNode 警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60946836/