在儿童中使用消费者的上下文

Posted 2023-04-14

【中文标题】在儿童中使用消费者的上下文

【英文标题】：Use context from consumer in children

【发布时间】：2019-08-27 05:23:47

【问题描述】：

我有消费者，它从提供者那里接收上下文：

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

我想在子元素中使用context，并将其设置为嵌套元素的道具。这样做的正确方法是什么？

提前致谢。

【问题讨论】：

为什么不向孩子们导入相同的上下文？

【参考方案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>
     )

并从 props 访问子项中的上下文。

如果您使用的是 v16.6.0 或更高版本的 React，您甚至不需要 HOC，并且可以为子组件定义 static contentTypes

您可以参考这篇文章了解更多详情： Access React Context outside of render function