React组件无法更新或传递Prop：点击按钮后counter值未同步到Text组件

问题原因 #

• 1. 状态归属错误：你把counter状态定义在了Button组件内部，这个状态只能在Button组件内部访问，和它平级的Text组件根本无法获取这个状态值。你在App组件里直接渲染的<Text/>没有接收任何prop，自然显示undefined。
• 2. onClick回调内的JSX无效：你在点击事件的回调函数里写的<Text counter={this.state.counter} />只是创建了一个Text组件的JSX对象，没有挂载到DOM树上，执行完就被回收了，完全不会生效。
• 3. 兄弟组件状态无法直接共享：React中平级组件之间不能直接传递状态，需要把共享状态提升到它们的共同父组件（也就是这里的App组件）里存储，再通过prop下发给需要的子组件。

修复方案 #

把共享状态提到App组件中，给Button下发状态更新方法，给Text下发counter值即可：

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

// Button组件接收父组件传的更新counter的方法
class Button extends React.Component {
  render() {
    return (
      <button onClick={() => {
        // 调用父组件传的更新方法
        this.props.onCounterIncrease()
      }}>
        Click here
      </button>
    )
  }
}
class Text extends React.Component {
  render() {
    return (
      <h2 id='counter-text'>{'Clicked ' + this.props.counter + ' times'}</h2>
    )
  }
}
// 把共享状态提到共同父组件App中
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {counter: 1}
    this.handleIncrease = this.handleIncrease.bind(this)
  }
  handleIncrease() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  render() {
    return (
      <>
        {/* 把counter作为prop传给Text */}
        <Text counter={this.state.counter}/>
        {/* 把更新counter的方法传给Button */}
        <Button onCounterIncrease={this.handleIncrease}/>
      </>
    )
  }
}

ReactDOM.render(<App/>,document.getElementById('root'));

内容的提问来源于stack exchange，提问作者ImEsteban