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屬於外來屬性