Избегайте дублирования при использовании React Context

Question

Я использую контекст React для управления состоянием, а климат кода не любит повторения вокруг провайдеров контекста.

Есть ли способчто я могу удалить дубликаты?

Answer 1

Правило климата Код может быть смягчено для этого конкретного кода.

Тем не менее, вы можете преобразовать текущее использование контекста в компонент React, выставив его реквизиты в качестве канала для предоставления значений в универсальном поставщике контекста.

Например, компонент WithCollectionкоторый направляет свои реквизиты на общий 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>