Альтернатива наследованию в React Components

Question

Я только что получил задачу рефакторинга некоторых компонентов представления на основе jQuery, которые используют наследование, в React. А именно, у нас есть SelectParameterView, с render(), реализованным примерно так:

render(){ 
    const { Title } = this.ViewModel,
      selectEl = this.getListElement()


    return $(`
    <div id="${this.GetSelector()}" class="row original justify-content-md-center m-t-sm">
        <div class="col-md-6 text-center">
            <p class="report-param-header">Please select ${Title}:</p>
            ${selectEl}
        </div>
    </div>
    `).data('model', this.ViewModel)
  }

, который имеет методы getListElement, getSelectOptions для формирования своего тела. Типы SelectParameterView просто переопределяют эти методы, за исключением StoreSelectParameterView, который имеет свой собственный render():

  render() {
    const { Title, Model } = this.ViewModel,
      selectEl = this.getListElement(),
      individualId = this.IndividualSelector.slice(1),
      combinedId = this.CombinedSelector.slice(1)

    return $(`
    <div id="${this.GetSelector()}" class="row original justify-content-md-center m-t-sm">
      <div class="col-md-6 text-center">
        <p class="report-param-header">Please select ${Title}:</p>
        ${selectEl}
        <div class="row original justify-content-md-center m-t-sm">
          <label class="w-100">
            <input
              type="checkbox"
              id="${individualId}"
              name="${individualId}"
              value="Individual"
              ${(Model.Individual) ? 'checked' : ''}> Individual Store Reports
          </label><br>
        </div>
        <div class="row original justify-content-md-center">
          <label class="w-100">
            <input
              type="checkbox"
              id="${combinedId}"
              name="${combinedId}"
              value="Combined"
              ${(Model.Combined) ? 'checked' : ''}> Final Combined Report
          </label><br>
        </div>
      </div>
    </div>
    `).data('model', this.ViewModel)
  }

Я пытаюсь найти наиболее удобный способ рефакторинга этоготак, что разные компоненты не должны использовать наследование (что не одобряется в сообществе React). много рассказывал о компонентах высшего порядка, помимо того, что они существуют, и думал о передаче дочернего элемента Components для элемента списка и опций выбора, но это может привести к некоторому шаблону со стороны пользователя (мы используем MVVMи хотите просто использовать Компонент сам по себе).

Как лучше всего это сделать?