Question

我正在编写自己的反应表组件。该表应接收将作为“行”工作的对象数组。每行可能有一个称为“ subrows”的道具。这样，我可以处理任何深度的内容。当我右键单击任何行时，屏幕上都会出现一些模式选项（类似于youtube视频）。这些选项会根据表的使用情况而有所不同，但有些表在所有表中都相似，例如“添加行”，“删除行”等。

我的第一个想法是将状态保存在Container组件中，并将行作为道具传递给Table组件，并处理Container中的所有CRUD操作。这意味着我将需要在每个可能有表的容器中实现“ onAddRow”，“ onDeleteRow”。

我自带的解决方案是在两个表（表和容器）中保持状态。实现逻辑以删除Table组件中的一行，并仅让Container知道该行已被删除，因此它可能会也可能不会处理它。

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'
    */
  }
}

我在这里实施反模式吗？还有更好的主意吗？

将状态保持在子状态并更新父状态

0 个答案: