React - 单个计数器组件 - Parent Increase/Decrease 全部

Question

警告：REACT 新手仍在学习。

我遇到了一个挑战，要求我构建一个简单的 React Counter 应用程序。规则是：不使用 Redux，不使用钩子。每个计数器独立运行，通过单击按钮增加或减少。和！ Parent 组件可以递增或递减所有计数器组件。

个体increment/decrement的EX：

计数器 1 = 2

计数器 2 = 4

计数器 3 = 6

EX Increment ALL 会做如下改动：

计数器 1 = 3

计数器 2 = 5

计数器 3 = 7

我知道这涉及在 parent 组件中定义的回调函数，我只是对如何实现它感到困惑。我现在有一个非常 non-efficient 的方法来做到这一点。谁能指导我如何以更有效的方式进行设置的正确方向？

这是我的Parent:

import React from 'react';
import Counter from './components/Counter';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.counterElement1 = React.createRef();
    this.counterElement2 = React.createRef();
    this.counterElement3 = React.createRef();
  }

  handleAllIncrease = () => {
    console.log("hello App Increase")
    this.counterElement1.current.handleIncrease();
    this.counterElement2.current.handleIncrease();
    this.counterElement3.current.handleIncrease();
  }

  handleAllDecrease = () => {
    console.log("hello App Decrease")
    this.counterElement1.current.handleDecrease();
    this.counterElement2.current.handleDecrease();
    this.counterElement3.current.handleDecrease();
  }

  render() {
    return (
      <div className="App">
        <button onClick={() => this.handleAllIncrease()}>Increase all</button>
        <button onClick={() => this.handleAllDecrease()}>Decrease all</button>
          <Counter  ref={this.counterElement1} />
          <Counter  ref={this.counterElement2}/>
          <Counter  ref={this.counterElement3}/>
      </div>
    );
  }
}

export default App;

这是我的Child:

import React from 'react';


class Counter extends React.Component {


    state = {
        num: 0,
    }

    handleIncrease = () => {
        console.log("hello increase")
        this.setState({
            num: this.state.num + 1,
        })

    }

    handleDecrease = () => {
        console.log("hello decrease")
        this.setState({
            num: this.state.num - 1,
        })
    }

    render() {
        return (
            <div>
                <p>{this.state.num}</p>
                <button onClick={this.handleIncrease}>+</button>
                <button onClick={this.handleDecrease}>-</button>
            </div>
        )
    }
}

export default Counter;

Answer 1

尝试使用memo.This有助于维护每个子组件的缓存。

react-hook

Answer 2

好的，我建议在父元素中包含所有功能。然后在里面定义4个函数，handleIncrease，handleDecrease，handleIncreaseAll，handleDecreaseAll。然后我将有一个带有计数器的数组，每个计数器都有一个索引以及它具有的相应 increasing/decreasing 值。在handleIncrease 和handleDecrease 中，你应该传递一个参数来确定当前计数器的索引并知道它应该是多少increase/decrease。最后，您应该将这些功能作为道具传递给计数器，并且在计数器中每个 increase/decrease 按钮的 onClick 事件上，您应该根据情况参考 props.handleIncrease 或 props.handleDecrease。

Answer 3

正如您所说，您是新手，所以不会尝试任何花哨的东西，而是会尝试找到一个简单的解决方案。

让我们将父组件 App 定义为

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      counterA: 0,
      counterB: 0,
      counterC: 0
    }
  }

  handleAllIncrement = () => {
    this.setState(prevState => ({
      counterA: prevState.counterA + 1,
      counterB: prevState.counterB + 1,
      counterC: prevState.counterC + 1
    }))
  }

  handleAllDecrement = () => {
    this.setState(prevState => ({
      counterA: prevState.counterA - 1,
      counterB: prevState.counterB - 1,
      counterC: prevState.counterC - 1
    }))
  }

  render() {
    return (
      <Fragment>
        <div style={{display: 'flex', justifyContent: 'space-evenly'}}>
          <Counter counter={this.state.counterA} />
          <Counter counter={this.state.counterB} />
          <Counter counter={this.state.counterC} />
        </div>
        <br />
        <div style={{textAlign: 'center'}}>
          <button onClick={this.handleAllIncrement}> + All </button>
          <button onClick={this.handleAllDecrement}> - All </button>
        </div>
      </Fragment>
    );
  }
}

它包含两个方法 handleAllIncrement 和 handleAllDecrement，它们将增加所有状态变量值，否则，这是父组件的目标。它还将具有三个 variables/state 变量，这些变量将传递给各个计数器组件。

counterA: 0,
counterB: 0,
counterC: 0

现在，让我们看看子组件做了什么。

import React from "react";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    };
  }

  handleIncrease = () => {
    this.setState(prevState => ({
      num: prevState.num + 1
    }));
  };

  handleDecrease = () => {
    this.setState(prevState => ({
      num: prevState.num - 1
    }));
  };

  render() {
    return (
      <div>
        <p>{this.state.num + this.props.counter}</p>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

最初，我们定义了一个状态变量 num，当单独执行增量和减量时，它会发生变化。

其余的东西是正常的反应东西，我唯一应用的技巧是线

<p>{this.state.num + this.props.counter}</p>

这一行的作用是将从父级传递的任何值添加到当前状态值。

因此，计数器 A 单独递增两次，因此 A 的 num 现在为 2。您现在单击了三次递增所有按钮，现在将发生的是 num + props.counter（即现在为 3）将给出 5，另一个将给出 3，因为单个状态为 0 + 传递的值为 3.

这里是运行代码，如果你想玩 Example

React - 单个计数器组件 - Parent Increase/Decrease 全部

React - Individual Counter Components - Parent Increase/Decrease All

counter

components

parent-child

reactjs