在React中实现点击时每次创建新空div的方式是否正确？

首先明确说：你的代码功能上确实能实现每次点击创建新的空div——每次点击时，通过parentRef.current拿到对应的DOM元素，调用原生appendChild方法添加新div，这个逻辑是能正常运行的。

但从React的设计理念和最佳实践来看，这并不是推荐的做法，原因如下：

• 绕过了React的状态管理与虚拟DOM机制：React的核心是通过状态变化驱动UI更新，所有UI变化都应由状态管控。直接操作原生DOM会让新增的div脱离React追踪，后续如果需要修改这些div的内容、样式或删除它们，会变得非常麻烦，还容易出现UI与状态不一致的bug。
• 维护性差：当组件因父组件更新或自身状态变化重新渲染时，React不会感知到这些手动添加的DOM元素，一旦出问题，排查难度会很高。

更符合React风格的实现方式 #

推荐使用useState来追踪需要渲染的div列表，通过状态变化触发UI更新，示例代码如下：

import "./styles.css";
import { useState } from "react";

export default function App() {
  // 用数组状态存储每个div的唯一标识（也可存储div的配置信息）
  const [divList, setDivList] = useState([]);

  const createNewDiv = () => {
    // 每次点击向数组添加新的唯一标识，用时间戳保证唯一性
    setDivList(prevList => [...prevList, `unique-div-${Date.now()}`]);
  };

  return (
    <div className="App">
      <div onClick={createNewDiv}>clickHere</div>
      {/* 将状态列表映射为对应的div元素 */}
      <div className="div-container">
        {divList.map(divId => (
          <div key={divId} />
        ))}
      </div>
    </div>
  );
}

这种方式的优势很明显：

• 状态与UI完全同步：所有div的创建、修改、删除都由状态控制，React会自动处理虚拟DOM更新，保证UI与状态一致。
• 易于扩展：后续如果要给div加内容、样式或事件监听，只需修改状态数据或渲染逻辑即可，无需手动操作DOM。
• 代码更易理解维护：其他开发者一眼就能明白UI是如何被状态驱动的，符合React社区的通用写法。

总结：你的原始代码能实现需求，但不是React的最佳实践。如果是简单演示场景可以用，但实际项目中，强烈建议使用状态驱动的方式来实现。

内容的提问来源于stack exchange，提问作者Aw KingOftheworld