React学习笔记(五) 组件

206 阅读1分钟

组件的优点

组件解决了html中标签构建应用的不足;
把公共的功能单独抽离成一个文件作为一个组件,哪里使用就在那儿引用,避免了想通的代码多次重写.

父子组件

组件的相互调用中,我们把调用者称为父组件,被调用者称为子组件。
父子组件传值(父子组件通信):
1、父组件给子组件传值:
1、1 在调用子组件的时候定义一个属性<Header msg='1'></Header>;
1、2 子组件里面 this.props.msg;

父组件向子组件传值不仅可以传递参数,还能传递方法,甚至能把整个父组件传递过去,,可以让子组件传递数据到父组件。

this为传递整个父组件.
2、父组件主动获取子组件值:
2、1 调用子组件的时候指定ref的值<Header ref='header'></Header>
2、2 通过this.refs.header获取整个子组件的实例;

子传父时,必须要在组件加载完后才能调用,所以不能直接调用子组件的数据,需要传建一个方法,在方法中调用。

坑:一定要注意import时即使在同一个包下,from中也要添加'./'不然会报错。切记!!