zoukankan      html  css  js  c++  java
  • findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper which is inside StrictMode.

    1. 警告信息

    Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper which is inside StrictMode. 
    Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

    2. 翻译(机翻)

    警告:findDOMNode在StrictMode中已弃用。给findDOMNode传递了一个DomWrapper位于StrictMode中的实例。相反,直接向要引用的元素添加一个ref。更多关于安全使用参考的信息请访问:https://reactjs.org/link/strict-mode-find-nodee。

    3. 分析

    ReactDOM.findDOMNode 可以用来找 DOM 节点,但现在并
    不推荐这样做,并且在严格模式中弃用该方法。findDOMNode的使用可能打破了封装性,而且可以用更好的办法代替findDOMNode去获取DOM节点(比如ref)。

    4. 解决方法

    所以解决方法就可以从两点入手:

    (1)规范使用react写法

    找到报错的位置,查询react文档,规范写法

    (2)关闭react的严格模式

     去掉StrictMode即可去除该报错信息

    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root'),
    );
    
    
    去掉StrictMode
    
    ReactDOM.render(
      <React>
        <App />
      </React>,
      document.getElementById('root'),
    );

    不过仔细看报错信息,会发现是antd中底层组件rc-menu使用到了findDOMNode,为了去除antd的警告而取消严格模式也不是很好的主意。而且这个报错只会在开发环境提示,打包后的项目中是不会有的,所以我决定还是不关闭严格模式,希望antd团队之后能解决这个问题吧。

  • 相关阅读:
    C# 委托的妙文相当适合我
    分享18个常用的网站性能测试工具
    使用Intelligencia.UrlRewriter重写有后缀及无后缀的url
    c#socket发送邮件详解
    欧美经典怀旧超级经典老歌!STARSHIP
    软件工程之百科名片SQA
    昨天订了道奇酷威
    陈淑桦梦醒时分
    TT已售
    组织过程资产与事业环境因素
  • 原文地址:https://www.cnblogs.com/ellen-mylife/p/15271562.html
Copyright © 2011-2022 走看看