管理有状态组件数组的ReactJs

import React, { useState } from 'react';

function ComponentArrayManager() {
  const [components, setComponents] = useState([]);

  const addComponent = () => {
    const newComponent = <YourComponent />;
    setComponents([...components, newComponent]);
  };

  const removeComponent = (index) => {
    const updatedComponents = [...components];
    updatedComponents.splice(index, 1);
    setComponents(updatedComponents);
  };

  return (
    <div>
      <button onClick={addComponent}>Add Component</button>
      {components.map((component, index) => (
        <div key={index}>
          {component}
          <button onClick={() => removeComponent(index)}>Remove Component</button>
        </div>
      ))}
    </div>
  );
}