使用带有 React 组件的 insertAdjacentHTML

Question

所以我正在尝试使用 React 重新创建 Github 贡献网格。

我正在尝试使用 insertAdjacentHTML 用一堆 div 填充网格容器，然后我可以设置它们的样式。

但是，React 给我一个错误“TypeError：无法读取属性 'insertAdjacentHTML' of null”

这是我的简单代码：

export default function NewHabit() {
  const gridContainer = document.querySelector('.grid-container');

  for (let i = 0; i < 365; i++) {
    gridContainer.insertAdjacentHTML('beforeend', `<div id="box></div>`);
  }

  return (
    <div>
      <div className="grid-container"></div>
    </div>
  );
}

Answer 1

当 NewHabit 开始执行时，组件尚未呈现。
您必须将它放在componentDidMount或useEffect(() => {}, [])之后，它们在组件安装并添加到 DOM 后执行。

此外，使用insertAdjacentHTML/Elmenent这样做是不安全的。 react 有一个虚拟 dom，它不会保留这种类型的变化。 在重新渲染之后，它可能会渲染它在虚拟 dom 中的内容。 例如，一个空网格。 最好以反应方式添加你的盒子。

Answer 2

仅通过 React 方式解决它：

export default function NewHabit() {
  let grid = [];
  for (let i = 0; i < 365; i++) {
    grid.push(<div className="box"></div>);
  }

  return (
    <div>
      <div className="grid-container">{grid}</div>
    </div>
  );
}

Answer 3

首先，仔细阅读 React 文档的Refs 和 DOM部分。 您应该了解的重要一点是 React 使用虚拟 DOM 工作，因此您无法直接访问浏览器的 DOM。

其次，我真的不鼓励你直接操作 DOM。 React 为您提供了许多动态呈现 html 的选项（实际上，它一直在动态呈现）。 例如，您可以使用列表和键来代替插入 html ：

export default function NewHabit() {
  let gridElements = []
  for (let i = 0; i < 365; i++) {
    gridElements.push(<div id="box" key={i}></div>)
  }

  return (
    <div>
      <div className="grid-container">{gridElements}</div>
    </div>
  );
}

但如果你真的想要直接 DOM 访问，只需使用 ref：

import {useRef} from 'react'

export default function NewHabit() {
  const containerRef= useRef(null);

  if (containerRef.current) {
    for (let i = 0; i < 365; i++) {
      containerRef.current.insertAdjacentHTML('beforeend', `<div id="box></div>`);
    }
  }

  return (
    <div>
      <div className="grid-container" ref={containerRef}></div>
    </div>
  );
}