如何在基于 ReactState 的类中重新渲染和添加更多功能？答案

【问题标题】：How do i re-render and add more functions in an class based on ReactState?如何在基于 ReactState 的类中重新渲染和添加更多功能？
【发布时间】：2022-11-18 14:50:36
【问题描述】：

我目前正在尝试制作一个功能多次添加计数器功能（Increment +）在点击或增加之后反应状态的Incrementor按钮无需删除/重置先前添加的Increment +按钮。

例子- 目前<Increment />在Finalrender的初始渲染中被调用了两次变量sub-container班级 [在下面的共享代码中给出].我想添加更多相同的 <Increment /> 以及增加的显示值Incrementor.表示用户何时按下Incrementor按钮然后是一个新的Increment +部分将被创建为独立工作。

现在，我如何根据递增的反应状态数`Increment +` 按钮。

我努力了使用 append 函数，但由于反应不渲染那些在渲染后稍后插入的项目，因此它不起作用。因此寻求这个社区的帮助。

Javascript -

const domContainer = document.getElementById("root");

// const content = "Hello World";

const Increment = () => {
  const [counter, setCounter] = React.useState(0);

  return (
    <div>
      <h1 id="display">{counter}</h1>
      <div>
        <button
          id="button"
          onClick={() => {
            setCounter(counter + 1);
          }}
        >
          Increment +
        </button>
      </div>
    </div>
  );
};

const Incrementor = () => {
  const [counter, setCounter] = React.useState(1);
  return (
    <div id="incrementorHolder">
      <h1 id="currentIncrementor">{counter}</h1>
      <div id="incrementorButtonHolder">
        <button
          id="incrementor"
          onClick={() => {
            setCounter(counter + 1);
          }}
        >
          Incrementor +
        </button>
      </div>
    </div>
  );
};

const Finalrender = (
  <div id="maincontainer">
    <div className="container">
      <Incrementor />
    </div>
    <div className="sub-container">
      <Increment />
      <Increment />
    </div>
  </div>
);

ReactDOM.createRoot(domContainer).render(Finalrender);

HTML -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="./incrementor.js" type="text/babel" defer></script>
    <title>Incrementor</title>
</head>
<body>
    
    <div id="root"></div>

</body>
</html>

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

如果你想使用旧值，你永远不应该像这样设置状态使用以前的状态更新值。

        onClick={() => {
          setCounter((previous)=> previous+1);
        }}

【讨论】：

现在，我如何根据递增的反应状态数Increment + 按钮。

Javascript -

HTML -

现在，我如何根据递增的反应状态数`Increment +` 按钮。