Задать вопрос
Subotinn
@Subotinn

Как правильно работать с props при большой вложенности компонентов?

Добрый день.
Если у нашего приложения есть достаточно большая вложенность, например 10.
И в главный компонент APP пришел json с данными для всех компонентов.
Как правильно раскидывать данные в props по различным компонентам в системе?

Для себя вижу либо выдергивать отдельные части json и прокидывать их по частям, или кидать сразу весь props для всех компонентов.

Пример:
Пришли все данные в App.
Нужно раскидать эти данные по всему приложению.
Если например пробрасывать props аж до SubComponent1 то будет очень много манипуляций.
И в случае если понадобится добавить новое поле в SubComponent1, нужно будет снова пробросить новый элемент вниз.

P.S.: Используется только React, без Flux/Redux. Разделить получение данных на несколько запросов не получится, все данные с состоянием всего приложения приходят за 1 запрос.
P.S.: Может быть кто-то встречал статьи хорошие с описанием грамотной работы с props в react,

<App>
  <Header/>
  <Body>
    <Compoment1>
      <SubComponent1 />
      <SubComponent2 />
      <SubComponent3 />
    </Compoment1>
    <Compoment2>
      <SubComponent1 /> //Сюда хочу пробросить props.
      <SubComponent2 />
      <SubComponent3 />
    </Compoment2>
    <Compoment3>
      <SubComponent1  />
      <SubComponent2 />
      <SubComponent3 />
    </Compoment3>
  </Body>
  <Footer />
</App>
  • Вопрос задан
  • 943 просмотра
Подписаться 2 Оценить 1 комментарий
Помогут разобраться в теме Все курсы
  • Нетология
    Frontend-разработка на React
    10 недель
    Далее
  • ProductStar
    Разработка на React
    6 недель
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 2
gadfi
@gadfi
https://gamega.org
1. Классическая redux архитектура разделение на умные и глупые компоненты, но это не значит что нужно экономить количество функций connect иначе легко появляются компоненты которым нужно передавать 20 пропертей ...
2. почитайте про context (не нужно использовать context вместо redux! но знать про него полезно)
Ответ написан
Комментировать
@vshvydky
я столкнулся с аналогичной делемой, решил, что в глупом компоненте нет места редаксконнекту, потому туда попадает колбек на linkState
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
от 250 000 до 300 000 ₽
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
ITK academy Екатеринбург
от 50 000 до 90 000 ₽