react----父子组件之间的参数传递

1.父组件向子组件传递参数

 //父组件
 import React from 'react';
 import './header.css'
 import ComponentChild from './headerChild'
 class ComponentHeader extends React.Component {
   constructor () {
     super()
     this.state = {
       username: 'Song',
       age: 18
     }
   }
   render () {
     return (
       <div>
         <ComponentChild name="dongdong"/>//子组件
         <p>这是一个测试组件</p>
         <p>{this.state.age}</p>
       </div>
     )
   }
 }
 export default ComponentHeader

 //子组件
 import React from 'react'
 class ComponentChild extends React.Component {
   render () {
     return (
       <div>
         <p>{this.props.name}</p>//通过this.props.key来过去父组件传递过来的数据
       </div>
     )
   }
 }
 export default ComponentChild

2.子组件向父组件传递参数

 //子组件
 import React from 'react'
 class ComponentChild extends React.Component {
   render () {
     return (
       <div>
         <button>点击测试：<input type="text" onChange={this.props.handleChange}/></button>//通过函数的形式将参数传递给父组件
         <p>{this.props.name}</p>
       </div>
     )
   }
 }
 export default ComponentChild

 //父组件
 import React from 'react';
 import './header.css'
 import ComponentChild from './headerChild'
 class ComponentHeader extends React.Component {
   constructor () {
     super()
     this.state = {
       username: 'Song',
       age: 18
     }
   }
   handleChange (event) { // 这个函数是可以用来获取子组件传递过来的数据
     this.setState({age:event.target.value})//使用setState将子组件传递过来的值，设置给父组件中的state
   }
   render () {
     return (
       <div>
         <ComponentChild handleChange={this.handleChange.bind(this)} name="dongdong"/> //这里注意一定要使用bind(this)改变this的指向，否则会报错，显示找不到this

         <p>这是一个测试组件</p>
         <p>{this.state.age}</p>
       </div>
     )
   }
 }
 export default ComponentHeader

这里面注意一点，state是属于组件的私有属性的，props属于外来属性