使用 React Context 时避免重复

【问题标题】：Avoid duplication when using React Context使用 React Context 时避免重复
【发布时间】：2019-02-26 22:06:06
【问题描述】：

我正在使用 React 上下文进行状态管理，并且代码环境不喜欢上下文提供者周围的重复。

有什么方法可以删除重复项？

【问题讨论】：

这对我来说似乎不是重复，因为两个上下文提供者都提供了状态的特定部分。我发现它以这种方式可读，宁愿放宽 CodeClimate 规则。但是，您可以实现一个高阶组件，该组件将子组件包装在通用反应提供者中并接收提供者值作为道具。
抱歉，“相似代码”是我认为的准确措辞。您能否详细说明一下 hoc 方法？我不明白如何创建一个具有不同值的通用提供程序作为道具。

标签： reactjs react-context

【解决方案1】：

可以针对此特定代码放宽代码气候规则。

也就是说，您可以将上下文的当前使用转换为 React 组件，将其 props 作为通道公开，以在通用上下文提供程序中提供值。

例如，可以创建一个 WithCollection 组件，它将其 props 转发给一个通用的 CollectionContext.Provider。将TasksContext.Provider和CommentsContext.Provider合并到CollectionContext.Provider中。

class WithCollection extends React.Component {
  render() {
    const {children, ...value} = this.props
    return (
      <CollectionContext.Provider value={value}>
      {children}
      </CollectionContext.Provider>
    );
  }
}

其用法表示如下：

<WithCollection tasks={this.state.tasks}>
//...
</WithCollection>

【讨论】：