Повторное использование компонентов React с HO C, которое зависит от логики состояния

Question

У меня есть много файлов, в которых используются те же переменные состояния, что и в компоненте календаря. Тем не менее, мне все еще нужно знать эти переменные из моего HO C, который, кажется, не прав на рефакторинг. Все примеры, которые я видел, являются довольно простым рефакторингом из-за логики c, которая не связана с переменными состояния (если мне не нужно было использовать timeFrom).

Я видел много примеров, которые используют { props.children}, обернутый между другими компонентами, но мне, кажется, нужно сделать наоборот. Кажется, я не могу сделать свой компонент Calendar дочерним, поскольку привязанная к нему логика c (с использованием timeFrom в приведенном ниже коде) необходима для некоторой функции в том же классе. Если бы я сделал это, мне пришлось бы продолжать передавать переменную состояния переменной timeFrom до myClass1, который является анти-шаблоном.

class1. js и classN. js все выглядит примерно так:

class myClass1 extends React.Component {
  constructor(props){
    ...
    this.state = {
      timeFrom : "",
      ...
    }
    this.updateTimeFrom = this.updateTimeFrom.bind(this);
    ...
  }

  someFunction() {
    // uses this.state.timeFrom
  }

  updateTimeFrom(time){
    this.setState ({timeFrom:time});
  }


  render() {
    ...
    return (
      <SomeComponents/>
      ...
      <Calendar updateTimeFrom={this.updateTimeFrom}>
      ...
      <MoreComponents/>
    )    
  }
}

Вы можете себе представить, что функция updateTimeFrom немного сложнее, чем просто 3 строки, но я не хочу объявлять это для каждой из моих компоненты classN.

Я попытался использовать компоненты более высокого порядка: https://reactjs.org/docs/higher-order-components.html и обернуть все мои классы, но у меня все еще есть проблема, которую мне нужно было бы объявить между моими другими компонентами. Вот как это выглядит сейчас:

class myClass1 extends React.Component {
  constructor(props){
    ...
    this.state = {
      ...
    }
    ...
  }

  someFunction() {
    // The programmer now seems to have to know that you have to use timeFrom from HOC props which seems unintuitive
    // uses this.props.timeFrom
  }

  render() {
    ...
    return (
      <SomeComponents/>
      ...
      // The programmer now seems to have to know that you have to use the function updateTimeFrom from HOC props which seems unintuitive also
      <Calendar updateTimeFrom={this.props.updateTimeFrom}>
      ...
      <MoreComponents/>
    )    
  }
}

export default wrappedForm()(class1);

и wrappedForm очень проста c рефакторинг:

import React from "react";

function wrappedForm() {
  return function(WrappedComponent) {
    class baseForm extends React.Component {
      constructor(props){
        super(props)
        this.state = {
          timeFrom: ''
        };

        this.updateTimeFrom = this.updateTimeFrom.bind(this);
      }

      updateTimeFrom(time){
        this.setState ({timeFrom:time});
      }

      render(){
        const {timeFrom} = this.state;
        return (
          <WrappedComponent
            {...this.props}
            timeFrom={timeFrom}
            updateTimeFrom={this.updateTimeFrom}
          />
        );
      }
    }
    return baseForm;
  }
}

export default wrappedForm;

Есть ли лучшие способы или шаблоны для рефакторинга этой ситуации?