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 v16.6.0或更高版本，则甚至不需要HOC，并且可以为子组件定义static contentTypes

您可以参考该帖子以获取更多详细信息： Access React Context outside of render function

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

1 个答案: