#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...