React实现点击按钮动态创建div元素的问题求助

原有代码核心问题 #

• 未阻止form表单提交的默认刷新行为，点击按钮后页面会重置，你动态添加的DOM会直接消失
• 直接操作原生DOM不符合React声明式开发规范，后续状态变更、组件更新时容易出现不可预期的问题

正确实现代码 #

import './App.css';
import { useState } from 'react';

function App() {
  // 用state维护所有需要渲染的新增div的内容列表
  const [divList, setDivList] = useState([]);
  // 固定要添加的文本内容，无需操作DOM获取
  const appendText = "INNER TEXT";

  function handleSubmit(e) {
    // 阻止form提交默认刷新行为
    e.preventDefault();
    // 往列表中新增一条内容，触发组件重新渲染
    setDivList(prev => [...prev, appendText]);
  }

  return (
    <div className="App">
      <header className="App-header">
        <form onSubmit={handleSubmit}>
          <button>Click me!</button>
          <div>{appendText}</div>
          {/* 遍历state列表，渲染所有新增的div */}
          {divList.map((text, index) => (
            <div key={index}>{text}</div>
          ))}
        </form>
      </header>
    </div>
  )
}

export default App;

实现说明 #

• 所有需要渲染的动态元素都通过state管理，React会根据state的变化自动更新DOM，不需要手动创建、插入节点
• 如果不需要用到表单的相关能力，也可以去掉form标签，直接给button绑定onClick事件触发添加逻辑即可
• 遍历渲染列表时需要给每个元素加唯一的key属性，这里用索引仅做示例，实际业务如果列表有增删排序的需求，建议用业务唯一id作为key

内容的提问来源于stack exchange，提问作者Nadim Seif