Используйте контекст от потребителя у детей

Question

У меня есть потребитель, который получает контекст от провайдера:

const ViewModeConsumer = ({children}) => (
  <ModeContext.Consumer>
    {context => (
      <aside>{children}</aside>
    )}
  </ModeContext.Consumer>
)

Я хочу использовать context внутри дочернего элемента и установить его как опору для вложенных элементов. Как правильно это сделать?

Заранее спасибо.

Answer 1

Вы можете использовать React.cloneElement для передачи реквизита детям

const ViewModeConsumer = ({children}) => (
  <ModeContext.Consumer>
    {context => (
      <aside>
         {React.Children.map(children, child => {
              return React.cloneElement(child, {context});
         })}
      </aside>
    )}
  </ModeContext.Consumer>
)

Однако, если ваша родительская логика просто передает контекст своим дочерним элементам, то, вероятно, лучше написать HOC, для которого вы вызываете каждый компонент, а не отображать их как дочерние для родительского компонента

const withViewModeContext = (Component) => {
    return (props) => (
      <ModeContext.Consumer>
        {context => (
             <Component {...props} context ={context} />
        )}
      </ModeContext.Consumer>
     )
}

и доступ к контексту внутри детей из реквизита.

Если вы используете React версии 16.6.0 или выше, вам даже не нужен HOC, и вы можете определить static contentTypes для дочернего компонента

Вы можете отослать этот пост для более подробной информации: Доступ к контексту реакции вне функции рендеринга