import React, { Component } from 'react';

 import Test from './component/test';

 //声明welcome组件

 class welcome extends Component {

   //声明一个构造函数

   constructor(props) {

     super(props);

     //this.state是定义组件状态，可理解为组件中的数据，好比Vue中的data

     this.state = {

       userName: '路飞',

       userAge: 19

     }

   }

   // react元素 一律写在render函数中

   render() {

     return (

       <div>

         <h1>welcome to the world of react</h1>

         {/* 在子组件中声明一个userName属性，将this.state.userName的值传递到子组件中 */}

         <Test userName={this.state.userName} userAge={this.state.userAge}></Test>

       </div>

     );

   }

 }

 //最后一定要记住 向外输出

 export default welcome;

 import React, { Component } from 'react';

 class test extends Component {

   render() {

     return (

       <div>

         <h1>我是test组件</h1>

         {/* 在子组件中用this.props接收父组件中传递过来的值 */}

         {[this.props.userName, this.props.userAge]}

         {console.log(this.props)}

         {/* 通过控制台打印，this.props是传递过来的是一个对象：{userName: "路飞", userAge: 19} */}

       </div>

     );

   }

 }

 export default test;