Держите состояние в дочернем и обновите родительский

Question

Я пишу свой собственный компонент таблицы реакции.Таблица должна получить массив объектов, которые будут работать как «строки».Каждый ряд может иметь опору, называемую «subrows».Таким образом, я могу справиться с любыми уровнями глубины.Когда я щелкаю правой кнопкой мыши в любом ряду, на экране появляются несколько модальных опций (аналогично видео на YouTube).Эти параметры будут различаться в зависимости от использования таблицы, но есть несколько, которые похожи во всех таблицах, таких как «Добавить строку», «Удалить строку» и т. Д.

Моей первой мыслью было сохранить состояние вкомпонент Контейнера и передает строки в качестве опоры компоненту Таблицы и обрабатывает все операции CRUD в Контейнере.Это означает, что мне потребуется реализовать onAddRow, onDeleteRow в каждом контейнере, который может иметь таблицу.

Решение, с которым я пришел, состояло в том, чтобы сохранить состояние в обоих местах, в таблице и контейнере.Реализуйте логику для удаления строки в компоненте Table и просто сообщите контейнеру, что строка была удалена, чтобы он мог или не мог ее обработать.

import React from 'react'

export default class Container extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      rows: []
    }
  }

  deleteRowHandler = row => {
    /* 
      Update container state and may call the API
    */
  }

  render(){
    return (
      <Table
        rows={this.state.rows}
        onDeleteRow = {deleteRowHandler}
      />
    )
  }
}

// Table component

class Table extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      rows: this.props.rows
    }
  }

  deleteRow = () => {
    /* 
      Code to delete the row from the Table state 'rows'
    */
    if(this.props.deleteRow){
      this.props.deleteRow(row)
    }
  }

  render(){
    /* 
      Render the table based on Table state 'rows'
    */
  }
}

Я реализую здесь анти-паттерн?Есть идеи получше?