react----父子组件之间的参数传递
1.父组件向子组件传递参数
1 //父组件 2 import React from 'react'; 3 import './header.css' 4 import ComponentChild from './headerChild' 5 class ComponentHeader extends React.Component { 6 constructor () { 7 super() 8 this.state = { 9 username: 'Song', 10 age: 18 11 } 12 } 13 render () { 14 return ( 15 <div> 16 <ComponentChild name="dongdong"/>//子组件 17 <p>这是一个测试组件</p> 18 <p>{this.state.age}</p> 19 </div> 20 ) 21 } 22 } 23 export default ComponentHeader 24 25 //子组件 26 import React from 'react' 27 class ComponentChild extends React.Component { 28 render () { 29 return ( 30 <div> 31 <p>{this.props.name}</p>//通过this.props.key来过去父组件传递过来的数据 32 </div> 33 ) 34 } 35 } 36 export default ComponentChild
2.子组件向父组件传递参数
1 //子组件 2 import React from 'react' 3 class ComponentChild extends React.Component { 4 render () { 5 return ( 6 <div> 7 <button>点击测试：<input type="text" onChange={this.props.handleChange}/></button>//通过函数的形式将参数传递给父组件 8 <p>{this.props.name}</p> 9 </div> 10 ) 11 } 12 } 13 export default ComponentChild 14 15 //父组件 16 import React from 'react'; 17 import './header.css' 18 import ComponentChild from './headerChild' 19 class ComponentHeader extends React.Component { 20 constructor () { 21 super() 22 this.state = { 23 username: 'Song', 24 age: 18 25 } 26 } 27 handleChange (event) { // 这个函数是可以用来获取子组件传递过来的数据 28 this.setState({age:event.target.value})//使用setState将子组件传递过来的值，设置给父组件中的state 29 } 30 render () { 31 return ( 32 <div> 33 <ComponentChild handleChange={this.handleChange.bind(this)} name="dongdong"/> //这里注意一定要使用bind(this)改变this的指向，否则会报错，显示找不到this
34 <p>这是一个测试组件</p> 35 <p>{this.state.age}</p> 36 </div> 37 ) 38 } 39 } 40 export default ComponentHeader
这里面注意一点，state是属于组件的私有属性的，props属于外来属性
