使用 React Context 时避免重复

Question

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

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

Answer 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>

使用 React Context 时避免重复

Avoid duplication when using React Context

reactjs

react-context