Вопрос о дизайне использования useContext в ответных хуках: похожие компоненты, но в другом контексте - PullRequest
Новая
       12

Вопрос о дизайне использования useContext в ответных хуках: похожие компоненты, но в другом контексте

2 голосов
/ 08 июня 2019

У меня есть Chart компонент, который состоит из Cell компонентов. И Chart, и Cells используют useContext хуки, и я предоставляю этот контекст во внешнем слое. Я хочу создать новую диаграмму, которая похожа, но использует другой контекст. Например, исходная диаграмма хранит и ищет информацию на основе разных ключей: когда я заполняю исходный контекст, он выглядит следующим образом: {'player 1': [], 'player 2': [], 'player 3' ...}, но новый контекст будет выглядеть следующим образом: {'You': [], 'Your opponent': []}

Должен ли я передать параметр / флаг компоненту Chart, который сообщает ему, какой контекст использовать? И тогда я мог бы сделать что-то вроде: const [selectedCombos, handleSelectedDispatch] = usePlayers ? useContext(OriginalContext) : useContext(OtherContext)

Могу ли я сделать что-то подобное? Я знаю, что он плохо пахнет, но единственная альтернатива, которую я вижу, - это копирование компонентов Chart / Cell в новый файл, изменение используемого им контекста и переименование. Это тоже отстой. Какой правильный подход здесь?

Я пытался просто скопировать код в новый компонент и использовать другой контекст, но это тоже воняет.

1 Ответ

0 голосов
/ 10 июня 2019

Передача флага - это плохо, потому что, если вы подумаете о будущем, что произойдет, если Cell сможет использовать 3 различных контекста? Или больше?

Тройной будет плохо. И вы будете импортировать контекст, который не будет использоваться.

Что вы можете сделать, это передать реквизит с контекстом.

, например 

// File that render the cell.
import OnlyTheContextYouNeed from '../mycontext/OnlyTheContextYouNeed'

...
    <Cell usedContext={OnlyTheContextYouNeed } />
...

//Cell.jsx    
...
const [selectedCombos, handleSelectedDispatch] = useContext(props.usedContext)

Таким образом, вам не нужно импортировать все контексты, которые у вас есть в Cell, и вы импортируете только тот контекст, который вам понадобится и который будете использовать при рендеринге Cell.

...