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

代码如下,在父类的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'));
阅读 13.2k
4 个回答
  1. 没有区别;

  2. 组件不要用继承。

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

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

新手上路,请多包涵

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

由于组件A是继承自组件B,即组件A也继承了组件B的所有未重写的生命周期方法,所有在组件A被创建过程中,执行了从组件B继承过来的生命周期方法,从而调用了组件A重写的getDate()方法。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题