@frw23

Как создать компонент, пропс которого будет сразу попадать в пропсы всех внутрилежащих компонентнов?

В styled-components есть такой провайдер, как ThemeProvider, в него устанавливается пропс theme={theme}. Затем этот пропс напрямую доступен во всех внутренних компонентах. Как реализовать такой провайдер самостоятельно?
  • Вопрос задан
  • 112 просмотров
Пригласить эксперта
Ответы на вопрос 2
@camelCaseVlad
Привет, я написал какое то время назад статью на данную тему на хабре, вот ссылка:

https://habr.com/ru/post/462963/

Если вы используете версию реакта выше 16.8, в файле theme-context/context.js замените код на

import React from 'react';

const { Provider, Consumer } = React.createContext({});

export { Provider, Consumer };
Ответ написан
@frw23 Автор вопроса
camelCaseVlad , Ваше решение почти то что нужно, только все равно ведь приходится использовать Consumer в собственных компонентах.
function MyComponent() {
  const renderMyComponent = theme => {
    return (
      // code
    );
  };
  return <ThemeConsumer>{theme => renderMyComponent(theme)}</ThemeConsumer>;
};

ThemeProvider делает это каким то образом под капотом, хочется понять как. Чтобы осталось только импортнуть MyProvider на вернхем уровне, указать там пропс и всё. Этот пропс автоматом попадает во все компоненты без доп.действий.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы