react中通过extend继承,父组件为什么能访问子组件的属性

发布于 2022-09-04 05:42:27 字数 960 浏览 19 评论 0

代码如下,在父类的componentWillMount方法中输出 this,打印的却是子类 item

图片描述

通过webpack的编译后文件中可以看到,Item方法中实际上有注入一个 _List参数,

问题: react 中的extends 与 es6中的extends的有什么区别吗?

    class List extends React.Component{
        constructor(props){
            super(props);
            this.state = {
              List: [4,5]
              
            }
        }
        componentWillMount(){
            console.log(this);
            console.log(this.state.List);
        }
    }
    
    class Item extends List{
        constructor(props){
            super(props);
            this.state = {
                List : [1,2,3]
            }
        }
       render(){
         return (
           <div>123</div>
         )
       }
    }
    
    React.render(<Item />, document.getElementById('app'));

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

许久 2022-09-11 05:42:27
  1. 没有区别;

  2. 组件不要用继承。

╰◇生如夏花灿烂 2022-09-11 05:42:27

父子组件的通信可以在父组件写一个函数,作为属性带给子组件,子组件用通过调用它把一些东西传回去

不即不离 2022-09-11 05:42:27

嗯 谢谢回答。
我其实想问 父组件中为什么能够访问子组件的属性,而采用es6的中这种方式却无效。
另外react中组件继承有什么缺点吗? 组件不都是继承自 React.Component吗?

猫七 2022-09-11 05:42:27

刚刚碰到同样的问题,在这里没有得到解答,问同事解决了:
组件A有个getDate()方法,只有定义没有调用,但实际确实执行了,查找代码发现组件A继承自组件B,组件B也定义了一个getData()方法,但是个return null;的空方法,然后在组件B的生命周期函数中调用了这个方法this.getData(),到这里就看不懂了,自以为是父类组件调用到子类组件的方法,感觉违背常理了,其实是理解错了:

由于组件A是继承自组件B,即组件A也继承了组件B的所有未重写的生命周期方法,所有在组件A被创建过程中,执行了从组件B继承过来的生命周期方法,从而调用了组件A重写的getDate()方法。
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文