Javascript 将组件放入数组中

我有一个需要“复制”的组件，当我按下按钮时，他们建议我使用.push，但我不明白，他们给我的例子是这个

[]

，而你正在做push

.push（）

，每次单击

按钮时，我要“复制”的组件都是
Dropzone
：

export default function Registration() {
  return (
    <div className="w-full text-sm relative">
      <InputTitle className="mb-4">Documentación</InputTitle>
      <div className="w-full flex items-center justify-between border-t border-b border-dark-15 p-4">
        <SingleDropdown>Selecciona tipo de documento</SingleDropdown>
        <div className="flex justify-end">
         [ <Dropzone />]
        </div>
      </div>
      <div className="flex justify-end items-center pr-4 pt-8 h-9">
        <Button.Secundary className="" onClick={()=>.push(<Dropzone />)}>
          Agregar otro documento
          <BsPlus className="ml-2 text-2xl font-bold" />
        </Button.Secundary>
      </div>
    </div>
  )
}

导出默认函数注册（）{
返回(
纪实
文件选择
[ ]
.push（）}>
阿格雷加奥特罗文件
)
}
您需要将下拉列表保存到可以在HTML中呈现的数组中。您可以使用钩子在功能组件中实现这一点。每次组件重新渲染时，可以使用该选项保存先前添加的下拉列表。这样，每次用户单击按钮时，也可以添加一个新的下拉列表

我在下面提供了一个例子

export default function Registration() {
  const [dropdowns, setDropdowns] = React.useState([]);

  const addDropdown = (component) =>
    setDropdowns((prev) => [...prev, component]);

  return (
    <div className='w-full text-sm relative'>
      <InputTitle className='mb-4'>Documentación</InputTitle>
      <div className='w-full flex items-center justify-between border-t border-b border-dark-15 p-4'>
        <SingleDropdown>Selecciona tipo de documento</SingleDropdown>
        <div className='flex justify-end'>
          {dropdowns}
        </div>
      </div>
      <div className='flex justify-end items-center pr-4 pt-8 h-9'>
        <Button.Secundary
          className=''
          onClick={() => addDropdown(<Dropzone />)}
        >
          Agregar otro documento
          <BsPlus className='ml-2 text-2xl font-bold' />
        </Button.Secundary>
      </div>
    </div>
  );
}

导出默认函数注册（）{
const[dropdowns，setDropdowns]=React.useState（[]）；
const addDropdown=（组件）=>
设置下拉列表（（上一个）=>[…上一个，组件]；
返回(
纪实
文件选择
{下拉列表}
addDropdown（）}
>
阿格雷加奥特罗文件
);
}
将状态与阵列一起使用您需要将dropzone分配给一个状态，并通过将dropzone推送到阵列来更新状态。问题是，我知道的不多，也不知道它会是什么样子，正如您所说，
[]
不是显示组件的正确方式。您可以在return语句之前创建一个数组，其中包含一个`DropZone组件。每次单击时，使用该数组的push方法更新该数组。并使用map函数渲染数组。你能举个例子吗？抱歉我的无知我还在学习@kay非常感谢兄弟不客气！：）