如果状态发生变化，如何更新 DOM？

Question

我已经根据输入变化动态创建了盒子容器。

如果我输入 1，它将创建一个框
如果我更改输入假设为 2，它会创建 3 个框，但它应该创建 2

import React from 'react';
import './style.css';

export default function App() {
  const [value, setValue] = React.useState();
  const boxRef = React.useRef();

  function createBox() {
    const div = document.createElement('div');
    div.classList.add('mystyle');
    div.style.backgroundColor = 'white';
    div.addEventListener('click', () => {
      let boxColor = div.style.backgroundColor;
      if (boxColor === 'white') {
        div.style.backgroundColor = 'red';
      } else {
        div.style.backgroundColor = 'white';
      }
    });
    return div;
  }

  React.useEffect(() => {
    for (let i = 0; i < value; i++) {
      const boxElement = createBox();
      boxRef.current.appendChild(boxElement);
    }
  }, [value]);

  function handleBoxCreate({ target: { value } }) {
    setValue(value);
  }

  return (
    <div>
      <h1>BOX CREATE</h1>
      <input type="number" name="boxInput" onChange={handleBoxCreate} />
      <div ref={boxRef}  />
    </div>
  );
}

/* style.css */
.mystyle {
  width: 30px;
  height: 30px;
  border: 2px solid black;
  display: inline-block;
  padding: 2px;
  margin-right: 5px;
}

我需要清理 dom 吗？如果是这样怎么办？或者有没有更好的方法来实现它。

请帮忙。泰:)

Answer 1

您应该避免对 DOM 进行直接操作。相反，创建一个“Box”反应组件并根据您的值状态的数量渲染它。

import React from "react";
import "./styles.css";

const Box = () => {
  const [color, setColor] = React.useState("white");

  const onClick = () => {
    if (color === "white") {
      setColor("red");
    } else {
      setColor("white");
    }
  };
  return (
    <div
      className="mystyle"
      style={{ backgroundColor: color }}
      onClick={onClick}
    />
  );
};

export default function App() {
  const [value, setValue] = React.useState(0);

  function handleBoxCreate({ target: { value } }) {
    setValue(Number(value));
  }

  return (
    <div>
      <h1>BOX CREATE</h1>
      <input type="number" name="boxInput" onChange={handleBoxCreate} />
      {[...Array(value)].map((e, i) => (
        <Box key={i} />
      ))}
    </div>
  );
}

如果状态发生变化，如何更新 DOM？

How can update the DOM if the state changes?

html

javascript

css

reactjs

react-hooks