React组件通讯之父传子

三种方式

• 父子组件之间

• 兄弟组件之间

• 跨组件层级

1.props的基本使用

 步骤

1.在子组件身上自定义属性

2.子组件通过props接收

 上图中state中定义了一个列表数据,并传给子组件,现在去子组件接受

子组件接受,解构,打印输出

就这么EZ

 -------------------------------------

props的三个注意事项

1.可以传递任意数据

数字， 字符串， 布尔类型， 数组， 对象， 函数， jsx

2.只能读取对象中的属性，无法修改

3.单向数据流

也叫做：自上而下的数据流

1.  父组件中的数据可以通过 props 传递给子组件，并且，当父组件中的数据更新时，子组件就会自动接收到最新的数据

2.  父组件的数据更新会流动到子组件，不能反过来，子组件直接去修改父组件的数据

就好比瀑布,从上往下流,只能上游影响下游

--------------------------------------------------------------------

props的children属性

一句话:子组件标签体内的内容会存在props的children里面

 这里在原有的基础上改了一下,继续去子组件那边打印props

 EZ.....

----------------------------------------------------------------------------

如何实现子传父?  

步骤:

1.父组件

1.定义一个回调函数（将会用于接收数据）

2.将该函数作为属性的值，传递给子组件

子组件

1.通过 props 获取

2.调用回调函数，并传入子组件的数据

上图中,调用了父组件的函数并传入参数

 结果可以看到,成功修改父组件里的状态

--------------------------------------

总结: props就是关键, 其实react中父子通讯与Vue有几分相似,如果有了解过vue的话,那更容易理解