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;