react 父组件 向 子组件 传值
发布时间:2020-12-15 20:37:30 所属栏目:百科 来源:网络整理
导读:父组件 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是定义组件
父组件 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; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |