使用React Context时避免重复

Question

我正在使用React上下文进行状态管理，并且代码环境不喜欢围绕Context Providers进行重复。

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

Answer 1

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

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

例如，可以创建一个将其道具转发到通用WithCollection的{​​{1}}组件。在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>
    );
  }
}