Question

我正在使用材质-ui的reactjs，我想在同一个视图中使用不同的数据放置两个表，但我到目前为止所有的都是错误

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

here the Docs for the table component

我不明白的是如何使用rowData，让我可以执行以下操作：rowData.rowsOutcome或rowData.rowsIncome

Answer 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} / >

}

如何使用不同的数据在同一视图中放置两个表？

1 个答案: