React中能否在组件内点击按钮添加自身组件？如何实现？

核心思路是把组件列表的控制权交给父组件（Component B），子组件（Component A）只负责渲染UI和触发增删的回调，具体的增删逻辑由父组件处理。

实现步骤&代码示例 #

这里用React函数组件+hooks来写，更容易理解：

1. 子组件 ComponentA

它只需要接收三个props：

• onAdd：点击添加按钮时触发的回调
• onRemove：点击删除按钮时触发的回调
• id：当前组件的唯一标识（用于精准删除）

import { useState } from 'react';

const ComponentA = ({ onAdd, onRemove, id }) => {
  // 子组件自身的输入框状态，独立维护即可
  const [inputValue, setInputValue] = useState('');

  return (
    <div style={{ margin: '8px 0', display: 'flex', gap: '8px' }}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入内容"
      />
      <button onClick={onAdd}>添加</button>
      <button onClick={() => onRemove(id)}>删除</button>
    </div>
  );
};

export default ComponentA;

2. 父组件 ComponentB

它负责维护所有ComponentA实例的列表状态，并且定义增删的核心逻辑：

import { useState } from 'react';
import ComponentA from './ComponentA';

const ComponentB = () => {
  // 用数组存储子组件的唯一标识，初始至少渲染一个ComponentA
  const [componentIds, setComponentIds] = useState([Date.now()]);

  // 添加新组件：往数组中推入一个新的唯一id
  const handleAdd = () => {
    setComponentIds([...componentIds, Date.now()]);
  };

  // 删除指定组件：过滤掉目标id对应的元素
  const handleRemove = (idToRemove) => {
    setComponentIds(componentIds.filter(id => id !== idToRemove));
  };

  return (
    <div>
      {/* 遍历渲染所有ComponentA实例 */}
      {componentIds.map(id => (
        <ComponentA
          key={id}
          id={id}
          onAdd={handleAdd}
          onRemove={handleRemove}
        />
      ))}
    </div>
  );
};

export default ComponentB;

关键逻辑说明 #

• 父组件通过componentIds数组控制ComponentA的渲染数量，新增组件就是往数组里加唯一id，删除则是移除对应id。
• 子组件点击「添加」时，实际是触发父组件的handleAdd方法，由父组件完成新增组件的逻辑；点击「删除」时，把自身id传给父组件的handleRemove，父组件过滤掉该id对应的组件实例。
• 每个子组件的输入框状态独立维护，不需要提升到父组件，保证各输入框内容互不干扰。

这样点击任意一个ComponentA里的「添加」按钮，都会新增一个相同的组件；点击「删除」只会移除当前对应的那一行，完全匹配你的需求。

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