Блог

Главная - Вопросы по программированию - поместить компонент в массив

поместить компонент в массив

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть компонент, который мне нужно «дублировать», когда я нажимаю кнопку, они рекомендовали мне использовать .push, но я не понимаю, пример, который они мне дали [<Component />] , таков, и вы делаете push .push(<Component />) , компонент, который я хочу «дублировать» Dropzone , каждый раз, когда я нажимаю кнопку Button :

 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>
  )
}

Комментарии:

1. Использовать состояние с массивом

2. вам нужно присвоить dropzone состоянию и обновить состояние, переместив dropzone в массив.

3. Проблема в том, что я не так много знаю, и я не знаю, на что это будет похоже, как вы говорите

4. [ <Dropzone />] неправильный способ отображения компонентов. Вы можете создать массив перед оператором return с одним компонентом `DropZone. При каждом нажатии обновляйте массив, используя метод push этого массива. И визуализировать массив с помощью функции map.

5. можете ли вы привести пример? извините за мое невежество, я все еще учусь @kay

Ответ №1:

Вам нужно сохранить выпадающие списки в массив, который можно отобразить в HTML. Вы делаете это в функциональных компонентах с помощью React.useState hook . Вы можете использовать это, чтобы сохранять ранее добавленные выпадающие списки для каждого повторного отображения компонента. При этом также возможно добавлять новый выпадающий список каждый раз, когда пользователь нажимает на кнопку.

Я привел пример ниже.

 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>
  );
}