React函数组件如何实现点击按钮动态添加组件

原代码无法实现预期效果，存在三个核心问题：

• 用普通变量listCount计数：函数组件每次重渲染都会重新执行函数逻辑，普通变量会被重置为初始值0，且修改变量不会触发React的视图更新流程
• 事件回调中返回的JSX不会自动渲染：onClick回调的返回值不会被插入到组件的渲染树中，当前组件返回的结构只有按钮，没有承载动态List组件的位置
• 模板字符串语法错误：list-{listCount}是普通字符串写法，不会读取listCount变量值，JS模板字符串插值需要使用${变量名}的格式

函数组件场景下需要通过React内置的useState Hook维护动态列表的状态，每次点击按钮时更新状态触发重渲染，再通过数组遍历渲染所有已添加的组件，完整代码如下：

import { useState } from 'react';
import List from "./List";

function App() {
  // 存储所有已添加的列表配置，初始为空数组
  const [listCollection, setListCollection] = useState([]);

  const addNewList = () => {
    const newListConfig = {
      id: Date.now(), // 生成唯一标识作为列表key，避免索引作为key的渲染问题
      name: `list-${listCollection.length + 1}`
    };
    // 基于原数组生成新数组更新状态，触发重渲染
    setListCollection([...listCollection, newListConfig]);
  };

  return (
    <div>
      <button onClick={addNewList}>Add List</button>
      {/* 遍历状态，渲染全部已添加的List组件 */}
      <div className="list-wrapper">
        {listCollection.map(item => (
          <List key={item.id} name={item.name} />
        ))}
      </div>
    </div>
  );
}

export default App;

• 所有需要驱动视图变化的数据必须存入useState管理的状态中，状态更新会自动触发组件重渲染，且状态值会在多次渲染间持久保留
• 事件回调中只做状态更新操作，不要直接在回调里返回要渲染的JSX，动态组件统一通过数组map方法遍历生成
• 遍历生成的同级组件必须传入唯一的key属性，帮助React区分不同组件，减少不必要的重渲染，避免组件状态错位
• 模板字符串中嵌入变量时，必须使用${变量}的插值格式，否则变量不会被解析

内容的提问来源于stack exchange，提问作者H.Yazdani