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

Question

[frw23]

В styled-components есть такой провайдер, как ThemeProvider, в него устанавливается пропс theme={theme}. Затем этот пропс напрямую доступен во всех внутренних компонентах. Как реализовать такой провайдер самостоятельно?

Answer 1

[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 };

Comments

[lnked]

import { createContext } from 'react';

export const { Provider, Consumer } = createContext({});

Answer 2

[frw23]

camelCaseVlad , Ваше решение почти то что нужно, только все равно ведь приходится использовать Consumer в собственных компонентах.

function MyComponent() {
  const renderMyComponent = theme => {
    return (
      // code
    );
  };
  return <ThemeConsumer>{theme => renderMyComponent(theme)}</ThemeConsumer>;
};

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

Comments

[camelCaseVlad]

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

Теперь MyComponent будет консюммть тему провайдера. У вас все получилось.

[frw23]

camelCaseVlad, так я хочу чтобы оборачивание моих компонентов в консюмер было скрыто, и не совсем догоняю как реализовать это

[camelCaseVlad]

Оберните его прям на уровне компонента, как описано в туториале. Затем, уже импортируя MyCompnent вам не нужно ничего оборачивать, так как данный компонент уже консюмер.

<Провайдер тема=дарк>
<МойКомпонент />
<Провайдер />

На уровне компонента он обернут, но тоже самое происходит, когда вы импортируете любой компонент, опубликованный на npm, в ваше случае, styledcomponents

[frw23]

camelCaseVlad,

function App() {
  return (
    <ThemeProvider theme="light">
      <MyComponent>
        <MyComponent1>
          <SubComponent1>
            <Button1 />
          </SubComponent1>
        </MyComponent1>
        <MyComponent2>
          <SubComponent2>
            <Button2 />
          </SubComponent2>
        </MyComponent2>
        <MyComponent3>
          <SubComponent3>
            <Button3 />
          </SubComponent3>
        </MyComponent3>
      </MyComponent>
    </ThemeProvider>
  );
}

Если я оберну только MyComponent, то пропс theme будет автоматом доступен во всех низлежащих компонентах?

[camelCaseVlad]

Консюмером будет только тот компонент, который вы обозначите.

[camelCaseVlad]

в данном примере у вас три компонента консюмера

[frw23]

camelCaseVlad,проблема в том, что мне не нужно менять компонент в зависимости от темы и рендерить его. Мне нужно прокидывать пропс глубоко вниз без лишних действий. В styled-component мы ведь руками не оборачиваем каждый компонент в консюмер чтобы потом использовать тему в разных местах.
Нужен один провайдер, в который можно обернуть компонент и передать пропс всем потомкам любого уровня вложенности.

[camelCaseVlad]

я сам не проверял, но вам поверю, что компоненты styled-components не обернуты в консюмер только, если вы мне скажете что являетесь контрибютором данного пакета.

[frw23]

camelCaseVlad, скорее всего они и обернуты, но нам ведь как пользователям не приходится делать это руками. Мне нужно реализовать точно такой же функционал

[camelCaseVlad]

ну как может провайдер предоставлять тему компоненту, если он не консюмер?

[camelCaseVlad]

а вот и код из документации

https://styled-components.com/docs/api#themeconsumer

мой код идиентичен с их, я думаю они писали свой пакет пользуясь моим туториалом)))))

[frw23]

camelCaseVlad,

<ThemeProvider theme={theme}>
      <AppBox>
        <Container>
          <Switch>
            <Route path="/main" component={MainPage} />
            <Route exact path="/card" component={CardPage} />
            <Route exact path="/cabinet" component={CabinetPage} />
            <Redirect from="/" to="/main" />
          </Switch>
        </Container>
      </AppBox>
    </ThemeProvider>

Попробуйте понять, что я вам в первую очередь говорю не о внутренней реализации, а о том как этим в итоге можно пользоваться. Вот тут я получаю доступ к теме из любого места. И я сам лично не использую при этом ни единого консюмера. Как там это все работает внутри меня как пользователя пакета это мало должно волновать.

[camelCaseVlad]

Ваш вопрос был, "Как реализовать такой провайдер самостоятельно?"

Зачем вам провайдет, у которого нет консюмера?

[frw23]

camelCaseVlad, неправильно сформировал вопрос, имелось ввиду как реализовать такой компонент, похожий на ThemeProvider из styled-components

[camelCaseVlad]

точно также, как я описал в туториале, судя по документам стайлд компонентс. я полагаю, что вы сами не понимаете, что вы хотите.