1

私は、reactjs と material-ui を使用しています。2 つのテーブルを同じビューに異なるデータで配置したいのですが、これまでに取得したのはエラーだけです

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 に答える