React教程：父子组件传值（组件通信）

1、父组件传值子组件

在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过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;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！