Question

我想在React中创建一个简单的计算器应用程序，该应用程序由3个主要组件组成：App.js，Buttons.js和Display.js。

App是“显示”和“按钮”的父代。显示位于按钮上方，并且根据按钮的单击，显示状态应更改。我将onClick函数作为道具传递给Button，即使应用程序的状态发生了变化，Display组件也不会重新呈现。

我将粘贴我的代码，并简化代码，删除大部分逻辑，仅保留一个按钮（'1'）。因此，按下该按钮应显示“ 1”。代码：

App.js：

import React, { Component } from 'react';
import './App.css';
import Buttons from './components/Buttons';
import Display from './components/Display';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      display: "0"
    }
  }

  handleClick = e => {
    this.setState({ display: e.target.value });
  }

  render() {
    return (
      <div className="container border border-success main-div">
        <Display display={this.state.display}/>
        <Buttons handleClick={this.handleClick} />
      </div>
    );
  }
}

export default App;

Display.js：

import React, { Component } from 'react';

class Display extends Component {
    constructor(props) {
        super(props);

        this.state = {
            display: "0"
        }
    }

    componentDidMount = () => {
        this.setState({ display: this.props.display })
    }

    render() {
        return (
            <div className="row border border-success">
                <div className="col">
                    {this.state.display}
                </div>
            </div>
        );
    }
}

export default Display;

Buttons.js：

import React, { Component } from 'react';

class Buttons extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="row">
                <div className="col-sm border border-success">
                    <div className="calc-button" data-value="1" onClick={this.props.handleClick}>1</div>
                </div>
            </div>
        );
    }
}

export default Buttons;

我在做什么错？如果这个方法不合适，还有什么其他实现方法？

Answer 1

您可以像这样简单地重写Display组件：

import React, { Component } from 'react';

export default class Display extends Component {
  render() {
    return (
      <div className="row border border-success">
          <div className="col">
              {this.props.display}
          </div>
      </div>      
    );
  }
}

您的示例不起作用，因为您在“显示器”上设置了一些内部组件状态，然后将其显示。您要查找的值已通过道具传递。

Answer 2

您可以选择Simone's answer，也可以使用static getDerivedStateFromProps()

显示组件可能看起来像这样：

  class Display extends Component {
        constructor(props) {
            super(props);

            this.state = {
                display: "0"
            }
        }

        // wrong placement
        // componentDidMount = () => {
        //     this.setState({ display: this.props.display })
        // } 

        static getDerivedStateFromProps(nextProps, prevState) {
         // do things with nextProps.display 
         // You can use static getDerivedStateFromProps and return a new state based on changes on props.
          return {
            display: nextProps.display
          };
        }

       //If you need to perform a side effect (for example, data fetching or an animation) 
      // in response to a change in props, use componentDidUpdate lifecycle instead.

        render() {
            return (
                <div className="row border border-success">
                    <div className="col">
                        {this.state.display}
                    </div>
                </div>
            );
        }
    }

export default Display;

Demo

通过父母更新另一个孩子的状态

2 个答案: