如何通过点击事件渲染并复制React组件？代码异常求助

你的代码存在几个关键问题，导致无法生成组件副本，下面逐一说明并给出修复后的代码：

核心问题 #

• 状态管理缺失：React组件渲染由状态驱动，直接在点击事件里返回组件不会触发页面更新，必须通过状态数组维护要渲染的组件列表。
• 函数语法错误：Replica函数写法错误，正确的箭头函数格式应为const Replica = () => { ... }，但即便修正，这种方式也无法触发组件渲染。
• 重复ID问题：Form2里的id='form-card2'和id="options-check"是固定值，生成多个副本会导致HTML ID重复，违反网页规范。
• 未定义函数：Optionscheck函数没有定义，会引发运行时错误。

修复后的完整代码 #

import { useState } from 'react';

const Comform = () => {
  // 用状态数组维护Form2的实例，初始为空
  const [formList, setFormList] = useState([]);

  // 定义Optionscheck函数，可根据需求补充逻辑
  const Optionscheck = () => {
    console.log('复选框被点击');
  };

  const Form2 = ({ index }) => {
    return (
      // 用index生成唯一ID，避免重复
      <div className="card" id={`form-card-${index}`}>
        <input
          className="form-check-input"
          type="checkbox"
          value=""
          id={`options-check-${index}`}
          onClick={Optionscheck}
        />
      </div>
    );
  };

  // 点击按钮时，向状态数组添加元素，触发重渲染
  const addForm = () => {
    setFormList(prev => [...prev, Date.now()]); // 用时间戳做唯一标识，也可使用uuid库
  };

  return (
    <div>
      <button type="button" className="btn btn-success" onClick={addForm}>Add</button>
      {/* 遍历状态数组，渲染所有Form2组件 */}
      {formList.map((item, index) => (
        <Form2 key={item} index={index} />
      ))}
    </div>
  );
};

export default Comform;

关键说明 #

• 使用useState创建formList数组，每次点击按钮就往数组里添加一个唯一值（时间戳），React会感知状态变化并重新渲染组件。
• 遍历formList数组，每个元素对应一个Form2组件，用item作为key（必须唯一），避免React渲染警告。
• 给Form2的ID加上index或唯一标识，确保每个副本的ID不重复。
• 补充Optionscheck函数定义，避免报错。

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