Блог

Главная - Вопросы по программированию - Как я могу сделать свой компонент Реакции динамичным?

Как я могу сделать свой компонент Реакции динамичным?

#reactjs #react-redux #react-hooks

Вопрос:

На данный момент существует компонент, который, по сути, копируется 4 раза. Я хотел бы сделать его более абстрактным и просто визуализировать его 4 раза и каждый раз передавать динамические данные. Данные, передаваемые в каждый компонент, являются перехватчиками состояний.

Учитывая, что это является целью, могу ли я получить некоторую помощь в реализации?

Вот как выглядит вызов компонента в родительском:

   const [allBlueItems, setAllBlueItems] = useState([]);
  const [selectedBlueItems, setSelectedBlueItems] = useState([]);
  const [allRedItems, setAllRedItems] = useState([]);
  const [selectedRedItems, setSelectedRedItems] = useState([]);

    <BlueSelection
      allBlueItems={allBlueItems}
      selectedBlueItems={setSelectedBlueItems}
      setSelectedBlueItems={selectedBlueItems}
    />

    <RedSelection
      allRedItems={allRedItems}
      selectedRedItems={setSelectedRedItems}
      setSelectedRedItems={selectedRedItems}
    />

Затем ItemSelection компонент использует эти значения useState, переданные в качестве реквизитов, для отображения данных и соответствующим образом обновляет состояние:

 const BlueSelection = ({ allBlueItems, selectedBlueItems, setSelectedBlueItems }) => {

  useEffect(() => {
      setSelectedBlueItems([]);
    }
  }, []);

Затем я повторяюсь и реализую точно такой же код для обработки повторной записи

 const RedSelection = ({ allRedItems, selectedRedItems, setSelectedRedItems }) => {

  useEffect(() => {
      setSelectedRedItems([]);
    }
  }, []);

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

1. Я не вижу никакого дубликата кода, который можно было бы сделать более абстрактным. Покажите нам, как вы повторяетесь, и, возможно, мы сможем помочь вам придумать что-то лучшее.

2. Хорошо, я обновил его. Спасибо

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

4. Если все они являются одной и той же компонентной логикой, то разве не было бы достаточно объявить одну и предоставить им идентификацию? До сих пор единственное различие, которое я вижу, заключается в том, что цвет является частью имени, которое вы называете конкретным «экземпляром» компонента выбора.

5. @ThePerplexedOne Я пытаюсь разделить состояние между компонентами

Ответ №1:

Рефакторинг

 export default const Selection = () => {
     const [allItems, setAllItems] = useState([]);
      const [selectedItems, setSelectedItems] = useState([]);
    
return (
        <Selection
          allItems={allItems}
          selectedItems={setSelectedItems}
          setSelectedItems={selectedItems}
        />)}

импортируйте это туда, где вам это нужно….

 import Selection as RedSelection from ...
import Selection as BlueSelection from...
Метки: