react学习9-React 组件间数据传递

组件间数据传递

• 父组件向子组件传值
  • props 属性值是只读的
• 子组件向父组件传值
  • 组件的函数形式的属性：父组件定义一个函数，通过子组件标签的属性将该函数传递给子组件，子组件接收到该函数后可以进行调用，调用时可以将子组件的数据通过函数实参传递给父组件
• 非父子组件之间传值
  • redux

代码示例：

class Parent extends React.Component {
  state = {
    total: 0
  }
  
  handleTotal = (n) => {
    // 修改父组件的数据
    this.setState({
      total: this.state.total + n
    })
  }

  render () {
    return (
      <div>
        <div>父组件总数：{this.state.total}</div>
        <Child handleTotal={this.handleTotal} cname='Tom'/>
        <Child handleTotal={this.handleTotal} cname='Jerry'/>
      </div>
    )
  }
}

class Child extends React.Component {
  state = {
    num: 0
  }
  handleClick = () => {
    // 修改子组件数据
    this.setState({
      num: this.state.num + 1
    })
    // 调用父组件传递过来的函数并且向父组件传递数据
    this.props.handleTotal(2)
  }
  render () {
    return (
      <div>
        <div>
          <span>子组件{this.props.cname}的数量：{this.state.num}</span>
          <button onClick={this.handleClick}>点击</button>
        </div>
      </div>
    )
  }
}