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