数据从父组件到子组件

一、将数据从父组件传递到子组件，参数传递过程时，注意父组件和子组件中各自属性的名称

父组件代码：

  1.  1 var React = require('react');
  2.  2 var ReactDOM = require('react-dom');
  3.  3 import BodyChild from './components/indexchild';
  4.  4 
  5.  5 class Index extends React.Component {
  6.  6 
  7.  7     constructor() {
  8.  8         //调用基类的所有的初始化方法
  9.  9         super(); 
  10. 10 
  11. 11         // 设置当前组件的属性
  12. 12         this.state = {
  13. 13             username: "Guang",
  14. 14             age: 20
  15. 15         }; 
  16. 16     };
  17. 17 
  18. 18     render() {
  19. 19         return (
  20. 20             <div>
  21. 21                 <h3>子组件</h3>
  22. 22 
  23. 23                 {/* 显示当前组件的属性作为对照 */}
  24. 24                 <p>age_parent: {this.state.age}</p>    
  25. 25                 <p>username: {this.state.username}</p>    
  26. 26 
  27. 27                 {/* 将当前组件的 state.age 传递给 子组件的 props.age_child */}
  28. 28                 <BodyChild age_child={this.state.age} username_child={this.state.username}/>
  29. 29                             
  30. 30             </div>
  31. 31         );
  32. 32     }
  33. 33 }
  34. 34 
  35. 35 ReactDOM.render(
  36. 36     <Index/>, document.getElementById('example'));

 

子组件代码：

  1.  1 import React from 'react';
  2.  2 
  3.  3 export default class BodyChild extends React.Component{
  4.  4 
  5.  5   constructor(props){
  6.  6     // React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时，
  7.  7     // 你应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常
  8.  8     super(props);
  9.  9 
  10. 10     // 父组件传递过来的属性存储在 props.username_child 中，将其赋值给当前组件的 state.username_child
  11. 11     this.state={username_child:props.username_child}
  12. 12   }
  13. 13 
  14. 14   render(){
  15. 15     return(
  16. 16       <div>
  17. 17         <h3>子组件</h3>
  18. 18         
  19. 19         {/* 父组件传递过来的属性存储在 props.age_child 中，获取并显示属性的值 */}
  20. 20         <p>age_child(通过 props 获得): {this.props.age_child}</p>
  21. 21 
  22. 22         {/* 获取并显示 state.username_child,该属性的值是从父组件中获取的 */}
  23. 23         <p>username_child(通过 props 赋值给 state 获得): {this.state.username_child}</p>
  24. 24 
  25. 25       </div>
  26. 26     )
  27. 27   }
  28. 28 }

运行结果：

 

二、将数据从父组件传递到子组件，若有多个数据要传递，如1000个，可一次性传递，参数传递过程时，注意父组件和子组件中各自属性的名称，与前面代码相比，下列代码对应属性名称有所改变（父组件中的 state.xxx 变成 子组件中的 props.xxx）

父组件代码

  1.  1 var React = require('react');
  2.  2 var ReactDOM = require('react-dom');
  3.  3 import BodyChild from './components/indexchild';
  4.  4 
  5.  5 class Index extends React.Component {
  6.  6 
  7.  7     constructor() {
  8.  8         //调用基类的所有的初始化方法
  9.  9         super(); 
  10. 10 
  11. 11         // 设置当前组件的属性
  12. 12         this.state = {
  13. 13             username: "Guang",
  14. 14             age: 20
  15. 15         }; 
  16. 16     };
  17. 17 
  18. 18     render() {
  19. 19         return (
  20. 20             <div>
  21. 21                 <h3>子组件</h3>
  22. 22 
  23. 23                 {/* 显示当前组件的属性作为对照 */}
  24. 24                 <p>age_parent: {this.state.age}</p>    
  25. 25                 <p>username: {this.state.username}</p>    
  26. 26 
  27. 27                 {/* 一次性传递当期组件的所有 state 中的属性传给子组件 同理：传递 props 可使用 {...this.props} */}
  28. 28                 <BodyChild{...this.state}/>
  29. 29                             
  30. 30             </div>
  31. 31         );
  32. 32     }
  33. 33 }
  34. 34 
  35. 35 ReactDOM.render(
  36. 36     <Index/>, document.getElementById('example'));

 

子组件代码

  1.  1 import React from 'react';
  2.  2 
  3.  3 export default class BodyChild extends React.Component{
  4.  4 
  5.  5   constructor(props){
  6.  6     // React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时，
  7.  7     // 你应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常
  8.  8     super(props);
  9.  9 
  10. 10     // 父组件传递过来的属性存储在 props.username 中，将其赋值给当前组件的 state.username_child
  11. 11     this.state={username_child:props.username}
  12. 12   }
  13. 13 
  14. 14   render(){
  15. 15     return(
  16. 16       <div>
  17. 17         <h3>子组件</h3>
  18. 18 
  19. 19         {/* 父组件传递过来的属性存储在 props.age 中，获取并显示属性的值 */}
  20. 20         <p>age_child(一次性传递，通过 props 获得): {this.props.age}</p>
  21. 21 
  22. 22         {/* 获取并显示 state.username_child,该属性的值是从父组件中获取的 */}
  23. 23         <p>username_child(一次性传递，通过 props 赋值给 state 获得): {this.state.username_child}</p>
  24. 24 
  25. 25       </div>
  26. 26     )
  27. 27   }
  28. 28 }

 

 运行结果：

 

 

 

数据从子组件到父组件

在子组件中通过调用父组件传递过来的事件函数进行数据的传递

例1：

 

父组件代码：

  1.  1 var React = require('react');
  2.  2 var ReactDOM = require('react-dom');
  3.  3 import BodyChild from './components/indexchild';
  4.  4 class Index extends React.Component {
  5.  5     constructor() {
  6.  6         super(); //调用基类的所有的初始化方法
  7.  7         this.state = {
  8.  8             username: "Tom",
  9.  9             age: 20,
  10. 10             child_data:"子组件的输入在此显示",
  11. 11         }; //初始化赋值        
  12. 12     };
  13. 13 
  14. 14     parentGetData(child_username,child_age){
  15. 15         this.setState({child_username:child_username,child_age:child_age});
  16. 16         // console.log(child_username,child_age);
  17. 17     }
  18. 18 
  19. 19     render() {
  20. 20         return (
  21. 21             <div>
  22. 22                 <h3>子组件的信息 用户名为：Guang Zai 年龄为：18 开始时为空，点击按钮可获取</h3>
  23. 23                 <p>子组件用户名:{this.state.child_username}</p>
  24. 24                 <p>子组件年龄:{this.state.child_age}</p>    
  25. 25                 <BodyChild childGetData={(n1,n2)=>this.parentGetData(n1,n2)}/>                    
  26. 26             </div>
  27. 27         );
  28. 28     }
  29. 29 }
  30. 30 ReactDOM.render(
  31. 31     <Index/>, document.getElementById('example'));

 

子组件代码：

  1.  1 import React from 'react';
  2.  2 
  3.  3 export default class BodyChild extends React.Component{
  4.  4 
  5.  5   constructor(props){
  6.  6     // React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时，
  7.  7     // 你应该在任何其他的表达式之前调用super(props)。否则，this.props在构造函数中将是未定义，并可能引发异常
  8.  8     super(props);
  9.  9     this.state={
  10. 10       username:"Guang Zai",
  11. 11       age:18
  12. 12     }
  13. 13   }
  14. 14   render(){
  15. 15     return(
  16. 16       <div> 
  17. 17           <p>子组件按钮：<input type="button" value="点击获取子组件信息" onClick={()=>this.props.childGetData(this.state.username,this.state.age)}></input></p>                      
  18. 18       </div>
  19. 19     )
  20. 20   }
  21. 21 }

 

运行结果：

点击按钮之前：

 

 

点击按钮之后：

 

 

例2：

 

父组件代码：

  1.  1 var React = require('react');
  2.  2 var ReactDOM = require('react-dom');
  3.  3 import BodyChild from './components/indexchild';
  4.  4 class Index extends React.Component {
  5.  5     constructor() {
  6.  6         super(); //调用基类的所有的初始化方法        
  7.  7         this.state={child_data:"此处实时显示子组件输入的信息"}
  8.  8 
  9.  9         // 初始化时 函数 this 使用 bind 绑定当前类
  10. 10         this.parentPageInputBind=this.parentPageInputBind.bind(this);
  11. 11     };
  12. 12     
  13. 13     parentPageInputBind(e){
  14. 14         this.setState({child_data:e.target.value});
  15. 15     };
  16. 16 
  17. 17     render() {
  18. 18         return (
  19. 19             <div>                
  20. 20                 <h3>子组件实时输入的信息</h3>
  21. 21                 <p>实时输入的信息：{this.state.child_data}</p>    
  22. 22                 <BodyChild childPageInputBind={this.parentPageInputBind}/>
  23. 23             </div>
  24. 24         );
  25. 25     }
  26. 26 }
  27. 27 ReactDOM.render(
  28. 28     <Index/>, document.getElementById('example'));

 

子组件代码：

  1.  1 import React from 'react';
  2.  2 
  3.  3 export default class BodyChild extends React.Component{
  4.  4   render(){
  5.  5     return(
  6.  6       <div> 
  7.  7           <p>子组件输入：<input type="text" onChange={this.props.childPageInputBind}></input></p>        
  8.  8       </div>
  9.  9     )
  10. 10   }
  11. 11 }

 

运行结果：

 

版权声明：本文为go4it原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/go4it/p/9551716.html