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: 1811     }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 ComponentHeader24 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

 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 ComponentChild14 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: 1825     }26   }27   handleChange (event) { // 这个函数是可以用来获取子组件传递过来的数据28     this.setState({age:event.target.value})//使用setState将子组件传递过来的值，设置给父组件中的state29   }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