数据从父组件到子组件
一、将数据从父组件传递到子组件，参数传递过程时，注意父组件和子组件中各自属性的名称
父组件代码：
1 var React = require('react'); 2 var ReactDOM = require('react-dom'); 3 import BodyChild from './components/indexchild'; 4 5 class Index extends React.Component { 6 7 constructor() { 8 //调用基类的所有的初始化方法 9 super(); 10 11 // 设置当前组件的属性 12 this.state = { 13 username: "Guang", 14 age: 20 15 }; 16 }; 17 18 render() { 19 return ( 20 <div> 21 <h3>子组件</h3> 22 23 {/* 显示当前组件的属性作为对照 */} 24 <p>age_parent: {this.state.age}</p> 25 <p>username: {this.state.username}</p> 26 27 {/* 将当前组件的 state.age 传递给 子组件的 props.age_child */} 28 <BodyChild age_child={this.state.age} username_child={this.state.username}/> 29 30 </div> 31 ); 32 } 33 } 34 35 ReactDOM.render( 36 <Index/>, document.getElementById('example'));
子组件代码：
1 import React from 'react'; 2 3 export default class BodyChild extends React.Component{ 4 5 constructor(props){ 6 // React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时， 7 // 你应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常 8 super(props); 9 10 // 父组件传递过来的属性存储在 props.username_child 中，将其赋值给当前组件的 state.username_child 11 this.state={username_child:props.username_child} 12 } 13 14 render(){ 15 return( 16 <div> 17 <h3>子组件</h3> 18 19 {/* 父组件传递过来的属性存储在 props.age_child 中，获取并显示属性的值 */} 20 <p>age_child(通过 props 获得): {this.props.age_child}</p> 21 22 {/* 获取并显示 state.username_child,该属性的值是从父组件中获取的 */} 23 <p>username_child(通过 props 赋值给 state 获得): {this.state.username_child}</p> 24 25 </div> 26 ) 27 } 28 }
运行结果：
二、将数据从父组件传递到子组件，若有多个数据要传递，如1000个，可一次性传递，参数传递过程时，注意父组件和子组件中各自属性的名称，与前面代码相比，下列代码对应属性名称有所改变（父组件中的 state.xxx 变成 子组件中的 props.xxx）
父组件代码
1 var React = require('react'); 2 var ReactDOM = require('react-dom'); 3 import BodyChild from './components/indexchild'; 4 5 class Index extends React.Component { 6 7 constructor() { 8 //调用基类的所有的初始化方法 9 super(); 10 11 // 设置当前组件的属性 12 this.state = { 13 username: "Guang", 14 age: 20 15 }; 16 }; 17 18 render() { 19 return ( 20 <div> 21 <h3>子组件</h3> 22 23 {/* 显示当前组件的属性作为对照 */} 24 <p>age_parent: {this.state.age}</p> 25 <p>username: {this.state.username}</p> 26 27 {/* 一次性传递当期组件的所有 state 中的属性传给子组件 同理：传递 props 可使用 {...this.props} */} 28 <BodyChild{...this.state}/> 29 30 </div> 31 ); 32 } 33 } 34 35 ReactDOM.render( 36 <Index/>, document.getElementById('example'));
子组件代码
1 import React from 'react'; 2 3 export default class BodyChild extends React.Component{ 4 5 constructor(props){ 6 // React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时， 7 // 你应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常 8 super(props); 9 10 // 父组件传递过来的属性存储在 props.username 中，将其赋值给当前组件的 state.username_child 11 this.state={username_child:props.username} 12 } 13 14 render(){ 15 return( 16 <div> 17 <h3>子组件</h3> 18 19 {/* 父组件传递过来的属性存储在 props.age 中，获取并显示属性的值 */} 20 <p>age_child(一次性传递，通过 props 获得): {this.props.age}</p> 21 22 {/* 获取并显示 state.username_child,该属性的值是从父组件中获取的 */} 23 <p>username_child(一次性传递，通过 props 赋值给 state 获得): {this.state.username_child}</p> 24 25 </div> 26 ) 27 } 28 }
运行结果：
数据从子组件到父组件
在子组件中通过调用父组件传递过来的事件函数进行数据的传递
例1：
父组件代码：
1 var React = require('react'); 2 var ReactDOM = require('react-dom'); 3 import BodyChild from './components/indexchild'; 4 class Index extends React.Component { 5 constructor() { 6 super(); //调用基类的所有的初始化方法 7 this.state = { 8 username: "Tom", 9 age: 20, 10 child_data:"子组件的输入在此显示", 11 }; //初始化赋值 12 }; 13 14 parentGetData(child_username,child_age){ 15 this.setState({child_username:child_username,child_age:child_age}); 16 // console.log(child_username,child_age); 17 } 18 19 render() { 20 return ( 21 <div> 22 <h3>子组件的信息 用户名为：Guang Zai 年龄为：18 开始时为空，点击按钮可获取</h3> 23 <p>子组件用户名:{this.state.child_username}</p> 24 <p>子组件年龄:{this.state.child_age}</p> 25 <BodyChild childGetData={(n1,n2)=>this.parentGetData(n1,n2)}/> 26 </div> 27 ); 28 } 29 } 30 ReactDOM.render( 31 <Index/>, document.getElementById('example'));
子组件代码：
1 import React from 'react'; 2 3 export default class BodyChild extends React.Component{ 4 5 constructor(props){ 6 // React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时， 7 // 你应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常 8 super(props); 9 this.state={ 10 username:"Guang Zai", 11 age:18 12 } 13 } 14 render(){ 15 return( 16 <div> 17 <p>子组件按钮：<input type="button" value="点击获取子组件信息" onClick={()=>this.props.childGetData(this.state.username,this.state.age)}></input></p> 18 </div> 19 ) 20 } 21 }
运行结果：
点击按钮之前：
点击按钮之后：
例2：
父组件代码：
1 var React = require('react'); 2 var ReactDOM = require('react-dom'); 3 import BodyChild from './components/indexchild'; 4 class Index extends React.Component { 5 constructor() { 6 super(); //调用基类的所有的初始化方法 7 this.state={child_data:"此处实时显示子组件输入的信息"} 8 9 // 初始化时 函数 this 使用 bind 绑定当前类 10 this.parentPageInputBind=this.parentPageInputBind.bind(this); 11 }; 12 13 parentPageInputBind(e){ 14 this.setState({child_data:e.target.value}); 15 }; 16 17 render() { 18 return ( 19 <div> 20 <h3>子组件实时输入的信息</h3> 21 <p>实时输入的信息：{this.state.child_data}</p> 22 <BodyChild childPageInputBind={this.parentPageInputBind}/> 23 </div> 24 ); 25 } 26 } 27 ReactDOM.render( 28 <Index/>, document.getElementById('example'));
子组件代码：
1 import React from 'react'; 2 3 export default class BodyChild extends React.Component{ 4 render(){ 5 return( 6 <div> 7 <p>子组件输入：<input type="text" onChange={this.props.childPageInputBind}></input></p> 8 </div> 9 ) 10 } 11 }
运行结果：