前端-react组件之间传值（详解版）

1、使用ref完成父子组件通信（子传父=>父组件可以直接获取子组件中的数据；父传子=>父组件可以利用setState修改即给子组件传值）（只能在类组件中使用）

（1）在父组件中导入createRef

 

（2）在类组件中调用createRef

（3） 在子组件中自定义属性

（4）此时通过this.childRef.current就可以获取到子组件实例对象了

父组件利用this.childRef.current.setState({name:’aaa’})可以给子组件传值

方法1：没有给子组件传值前，子组件中的state为空，页面中child也不显示

 

 父组件将数值传给子组件后，子组件获得数据，页面中数据展示

 

 

方法2：在子组件中定义设置state的方法，父组件获取到子组件后，调用子组件的该方法，也可以进行传值

在子组件中定义修改数值的方法setState

 在父组件中调用该方法

 （5）获取子组件中的数据（父组件通过this.childRef.current已经获取到了子组件实例对象，那么对于子组件实例对象中的数据和方法可以直接使用）

2、子组件给父组件传值props

父组件给子组件定义属性，将要传输的数值传过去

 子组件利用this.props（是个对象）接收数值

子组件将父组件传过来的值进行修改

子组件不能直接修改this.props传过来的值，所以可以在父组件中定义修改数值的方法，再将方法传给子组件（render里面的标签上不能直接使用this.props.setName()）

父组件中定义方法，并通过自定义属性的方式，将方法传给子组件

 

 3、跨组件通信（利用上下文对象context:将state中共用的数据写到共同的父组件中，称为状态提升。context可以存储数据，不能刷新。工作模式是生产和消费，先生产好数据，才能被消费。context可以定义N多个，可以绑定到不同的祖先节点中。绑定到一个祖先节点中的context，只有这个祖先节点下的子组件才能使用context中的数据，别的祖先节点下的子组件不能使用。）

  （1）、在src下面新建context文件夹

 

（2）、在context下面新建app.js文件（要将context绑在app.jsx中）

 

（3）、

（4）、

 

（5）、

（6）、默认导出加default;按需导出不用加