react 父组件 向 子组件 传值

父组件

 1 import React, { Component } from 'react';
 2 import Test from './component/test';
 3 //声明welcome组件
 4 class welcome extends Component {
 5   //声明一个构造函数
 6   constructor(props) {
 7     super(props);
 8     //this.state是定义组件状态，可理解为组件中的数据，好比Vue中的data
 9     this.state = {
10       userName: '路飞',
11       userAge: 19
12     }
13   }
14   // react元素 一律写在render函数中
15   render() {
16     return (
17       <div>
18         <h1>welcome to the world of react</h1>
19         {/* 在子组件中声明一个userName属性，将this.state.userName的值传递到子组件中 */}
20         <Test userName={this.state.userName} userAge={this.state.userAge}></Test>
21       </div>
22     );
23   }
24 }
25 //最后一定要记住 向外输出
26 export default welcome;

子组件

 1 import React, { Component } from 'react';
 2 
 3 class test extends Component {
 4   render() {
 5     return (
 6       <div>
 7         <h1>我是test组件</h1>
 8         {/* 在子组件中用this.props接收父组件中传递过来的值 */}
 9         {[this.props.userName, this.props.userAge]}
10 
11         {console.log(this.props)}
12         {/* 通过控制台打印，this.props是传递过来的是一个对象：{userName: "路飞", userAge: 19} */}
13       </div>
14     );
15   }
16 }
17 
18 export default test;

 

转载于:https://www.cnblogs.com/TreeCTJ/p/10178296.html