如何在React的表格行中显示2张不同的牌

时间:2018-09-22 21:29:44

标签: javascript reactjs

我想在一个表行中显示2个不同的元素。

例如:

第1行第1列-数组[1]中的元素,

第1行第2列-数组[2]等中的元素。

但是,我真的不知道如何添加它, 多谢您的协助。 谢谢

tableRow.jsx:

export default class TableRow extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {flats} = this.props;

    return (
      <tr>
        <td><Card flats={this.props}/></td>
        <td><Card flats={this.props}/></td>
      </tr>
    );
  }
}

DataTable.jsx:
 renderFlats(){
   const {flats} = this.props;
    console.log(this.props);
   return flats.map(flat => {
     return (
       <TableRow
         key={flat.id}
         id={flat.id}
         address={flat.address}
         guestAmount={flat.guestAmount}
         area = {flat.area}
         dailyPrice = {flat.dailyPrice}
         photosUrl = {flat.photos[0]}
       />);
   });
 }
  render() {
    return (
      <div>
        <table>
          <tbody>{this.renderFlats()}</tbody>
        </table>
      </div>
    );
  }

0 个答案:

没有答案