react之props传值

import React from 'react';
import ReactDOM from 'react-dom';

class Parent extends React.Component {
  state = {
    name: '王大大',
    parAge: ''
  }

  // 父组件接收并做处理
  changeName = (data) => {
    this.setState({
      parAge: data
    })
  }

  render() {
    return (
      <div className='parent'>
        {/* 展示子组件传的值 */}
        <div>父组件接收子组件：{this.state.parAge}</div>
        <Children name="jack" changeName={this.changeName} />
      </div>
    )
  }
}

class Children extends React.Component {

  state = {
    age: '12'
  }
  // 点击按钮时传值给父组件
  handleClick = () => {
    this.props.changeName(this.state.age)
  }

  render() {
    return (
      <div>
        {/* 子组件接收父组件传值 */}
        <div>名字：{this.props.name}</div>
        <button onClick={this.handleClick}>点击子组件</button>
      </div>
    )
  }
}
ReactDOM.render(<Parent />, document.getElementById('root'))

如果碰到一个父组件，两个子组件，进行两个子组件的传值，也可以用props进行，只是比较麻烦，不推荐使用

import React from 'react';
import ReactDOM from 'react-dom';

class Parent extends React.Component {
  state = {
    count: 0
  }
  // 获取子组件2传来的事件，然后更新子组件1的状态
  getCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  // 父组件引入两个子组件
  render() {
    return (
      <div>
        <Children1 count={this.state.count} />
        <Children2 getCount={this.getCount} />
      </div>
    )
  }
}

class Children1 extends React.Component {
  render() {
    return (
      <div>
        {/* 子组件1接收父组件传来的值 */}
        计数器 :{this.props.count}
      </div>
    )
  }
}

class Children2 extends React.Component {
  // 点击子组件2的按钮
  handleClick = () => {
    this.props.getCount()
  }
  render() {
    return (
      <button onClick={this.handleClick}>+1</button>
    )
  }
}
ReactDOM.render(<Parent />, document.getElementById('root'))