react 子传参父_详解React组件通信（父传子、子传父、兄弟组件传值）

1、父组件传值子组件

React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件，如下图：

在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。

父组件向子组件传值，通过props，将父组件的state传递给了子组件。

父组件代码片段：

constructor(props){

super(props)

this.state={

message:"i am from parent"

}

}

render(){

return(

)

}

}

子组件代码片段：

render(){

return(

{this.props.txt}

)

}

完整示例

创建父组件 index.js

import React from 'react';

import ReactDOM from 'react-dom';

import User from './User';//引入子组件

//定义数据

const person = {

name: 'Tom',

age:20

}

ReactDOM.render(

//渲染子组件，并向子组件传递name,age属性

, document.getElementById('root'));

创建子组件 User.js

import React from 'react';

class User extends React.Component{

render(){

return (

// 使用props属性接收父组件传递过来的参数

{this.props.name}，{this.props.age}

);

}

}

export default User;

在父组件中可以使用展开运算符 ... 传递对象

index.js文件

ReactDOM.render(

//渲染子组件，并向子组件传递name,age属性

, document.getElementById('root'));

User.js文件

render(){

return (

// 使用props属性接收父组件传递过来的参数

{this.props.name}，{this.props.age}

);

}

2、子组件传值父组件

子组件通过调用父组件传递到子组件的方法向父组件传递消息的。

完整案例

子组件 Son.js 文件代码示例：

import React from 'react';

class Son extends React.Component {

//构造方法

constructor(){

super();

this.state = {

inputValue:''

}

}

//按钮点击事件

handleClick(){

//通过props属性获取父组件的getdata方法，并将this.state值传递过去

this.props.getdata(this.state.inputValue);

}

//输入框事件，用于为this.state赋值

handleChange(e){

this.setState({

inputValue: e.target.value

});

}

render(){

return (

点击获取数据

);

}

}

export default Son;

父组件 Parent.js 文件代码示例：

import React from 'react';

import Son from './Son';

class Parent extends React.Component {

//构造方法

constructor(){

super();

this.state = {

mess: '' //初始化mess属性

}

}

//用于接收子组件的传值方法，参数为子组件传递过来的值

getDatas(msg){

//把子组件传递过来的值赋给this.state中的属性

this.setState({

mess: msg

});

}

render(){

return (

{/* 渲染子组件，设置子组件访问的方法，

getdata属性名为子组件中调用的父组件方法名 */}

展示数据：{this.state.mess}

);

}

}

export default Parent;

入口文件 index.js示例代码：

import React from 'react';

import ReactDOM from 'react-dom';

import Parent from './Parent';

ReactDOM.render(, document.getElementById('root'));

3、兄弟组件传值

兄弟组件之间的传值，是通过父组件做的中转 ，流程为：

组件A -- 传值 --> 父组件 -- 传值 --> 组件B

其实可以理解为把前两个步骤又重新做了一遍，即先执行子组件传值父组件，然后再执行父组件传值子组件，效果如下图：

代码示例：

创建 Acls.js 组件，用于提供数据

import React from 'react';

class Acls extends React.Component {

//按钮点击事件，向父组件Pcls.js传值

handleClick(){

this.props.data("hello...React...");

}

render(){

return (

Acls组件中获取数据

);

}

}

export default Acls;

创建父组件 Pcls.js 用于中转数据

import React from 'react';

import Acls from './Acls';

import Bcls from './Bcls';

class Pcls extends React.Component {

//构造函数

constructor(){

super();

this.state = {

mess: ''

}

}

//向子组件Acls.js提供的传值方法，参数为获取的子组件传过来的值

getDatas(data){

this.setState({

mess: data

});

}

render(){

return (

Pcls组件中显示按钮并传值：

);

}

}

export default Pcls;

创建子组件 Bcls.js 用于展示从 Acls.js 组件中生成的数据

import React from 'react';

class Bcls extends React.Component {

render(){

return (

在Bcls组件中展示数据：{this.props.mess}

);

}

}

export default Bcls;