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属于外来属性