1

我正在将 reactjs 与 material-ui 一起使用，我想将两个表放在具有不同数据的同一个视图中，但到目前为止我得到的只是错误

const cols = {
  amount : { content : 'Amount' },
  time   : { content : 'Time' },
  date   : { content : 'Date' },
  reason : { content : 'Reason' }
};

const colOrder = [ 'amount', 'time', 'date', 'reason' ];

const rowsIncome = [{
  amount : { content : '$895.33' },
  time   : { content : '22:23 EST' },
  date   : { content : '07/27/2015' },
  reason : { content : 'Reason for income' }
},
{
  amount : { content : '$900.33' },
  time   : { content : '21:43 EST' },
  date   : { content : '07/29/2015' },
  reason : { content : 'Reason for income' }
}];

const rowsOutcome = [{
  amount : { content : '$867.66' },
  time   : { content : '22:23 EST' },
  date   : { content : '07/24/2015' },
  reason : { content : 'Reason for income' }
},
{
  amount : { content : '$798.43' },
  time   : { content : '21:43 EST' },
  date   : { content : '07/25/2015' },
  reason : { content : 'Reason for income' }
}];

export default class PlayersInfo extends Component {

  constructor (props) {
    super(props);
    this.state = { rowData: rowsIncome };
    console.log(this.state);
  }

  static contextTypes = {
    router : React.PropTypes.func
  }

  render () {
    return <div className="container">
      <Grid>
        <h4>Money Income</h4>
        <Row>
          <Column>
            //TABLE WITH ROWSOUTCOME
            <Table
              headerColumns={cols}
              columnOrder={colOrder}
              rowData={this.state.rowData.rowsOutcome} />
            //TABLE WITH ROWSINCOME
            <Table
              headerColumns={cols}
              columnOrder={colOrder}
              rowData={this.state.rowData.rowsIncome} />
            </Column>
        </Row>
      </Grid>;
    </div>;
  };

}

const rowsIncome我想保持不同的信息是const rowsOutcome

这里是表格组件的文档

我不明白的是如何玩rowData，允许我做类似的事情：rowData.rowsOutcome或rowData.rowsIncome

4

1 回答 1

1 
this.state = { rowData: rowsIncome };

这不是很好的做法。更好的方法是将您的视图分成专门的子组件，并通过 props 传递在组件类之外定义的数据。如果您将表格元素分离为一个专门的组件，那么调整它会更容易，直到不再出现错误（有关这些问题的反馈，请发布指向 jsfiddle 或 codepen 页面的链接）。

class PlayerIncomeTable extends Component {
    render() {
        const {rows} = this.props;
        const cols = {
          amount : { content : 'Amount' },
          time   : { content : 'Time' },
          date   : { content : 'Date' },
          reason : { content : 'Reason' }
        };
        const colOrder = [ 'amount', 'time', 'date', 'reason' ];

        return <Table
          headerColumns={cols}
          columnOrder={colOrder}
          rowData={rows} 
        />
    }
}

class PlayersInfo extends Component {
  render () {
    var {rowsIncome, rowsOutcome} = this.props;
    return <div className="container">
      <Grid>
        <h4>Money Income</h4>
        <Row>
          <Column>
            <PlayerIncomeTable rows={rowsOutcome} />
            <PlayerIncomeTable rows={rowsIncome} />
           </Column> 
        </Row>
      </Grid>;
    </div>;
  };
}

export default class PlayersIncome extends React.Component {

    const rowsIncome = [{
      amount : { content : '$895.33' },
      time   : { content : '22:23 EST' },
      date   : { content : '07/27/2015' },
      reason : { content : 'Reason for income' }
    },
    {
      amount : { content : '$900.33' },
      time   : { content : '21:43 EST' },
      date   : { content : '07/29/2015' },
      reason : { content : 'Reason for income' }
    }];

    const rowsOutcome = [{
      amount : { content : '$867.66' },
      time   : { content : '22:23 EST' },
      date   : { content : '07/24/2015' },
      reason : { content : 'Reason for income' }
    },
    {
      amount : { content : '$798.43' },
      time   : { content : '21:43 EST' },
      date   : { content : '07/25/2015' },
      reason : { content : 'Reason for income' }
    }];
    return <PlayerInfo rowsIncome={rowsIncome} rowsIncome={rowsOutcome} / >

}
于 2015-08-04T14:56:35.070 回答