Question

我意识到以前曾经问过类似的问题，但是通过阅读这里的一些问答，似乎在很多情况下，人们建议使用componentWillUpdate，但是从我（非常）对React的基本理解中，如果我{{ 1}}如果子组件受到影响，它们是否不会重新渲染？

这是我的App组件（显示正在设置的状态，更新状态setState()的功能），Display组件（显示来自状态的当前输入）和Button组件，其显示数字并传递函数handleClick：

handleClick

这是Button组件：

 this.State = {
      calcValue: 0
    }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(val) {
    this.setState({ calcValue: val })
   }

  render() {
    return( 
      <div class="calcBody">
        <Display currentValue={this.State.calcValue} />
        <h1>Calculator</h1>
        <div class="numPad">
        <Button btn="num col1" operator={1} handleClick={this.handleClick.bind(this)} />

最后，这是显示组件：

    class Button extends React.Component {
      constructor(props) {
        super(props);
      }
      render() {
        return(
/*the button when clicked takes the handleClick function and passes it props based on whatever number is pressed */
          <button onClick={() => this.props.handleClick(this.props.operator)}>
          <div class={this.props.btn}>{this.props.operator}</div>
          </button>
        )
      }
    }

我想知道为什么在调用handleClick（val）时不会更新？

Answer 1

您将状态定义为this.State，这是不正确的，should be lowercased：this.state：

this.state = {
    calcValue: 0
}

此外，这一行：

this.props = {
   currentValue: this.props.currentValue
}

没有什么意义，因为道具从外面传了出去，component shouldn't change them。

React子组件不会在状态更改时重新呈现

1 个答案: