使用React.js将具有多个列的行添加到html表

问题描述 投票：0回答：2

我有这个问题，我尝试将csv数据放到带有React的html表中。我不想硬编码它所以它适用于不同的数据。我用const行试过不同的东西。

SampleData状态确实具有我想要使用的实际数据显示在表（CSV data.slice（1））中，并且头状态确实具有我用作标题的第一行csv数据。所以我想使用类似.map的东西来使这个表响应，而不是静态。

render() {
    const headerData = this.state.headers.map(a => {
        return <th>{a}</th>
    })

    var rows = this.state.sampleData.map(a => {
        return <tr><td>{a}</td></tr>
    })
    // This code works but I want to make it better
    // <tr><td>{a[0]}</td><td>{a[1]}</td><td>{a[2]}</td><td>{a[3]}</td><td>{a[4]}</td><td>{a[5]}</td><td>{a[6]}</td><td>{a[7]}</td><td>{a[8]}</td></tr>


    return (
        <div>
            <CSVReader
                label="Select CSV file"
                onFileLoaded={this.handleFile}
            />
            <br/>
            <p>Length: {this.state.sampleData[0].length}</p>
            <table>
                <thead>
                    <tr>{headerData}</tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>

            </table>
        </div>
    )
}
html reactjs csv
2个回答
0
投票

您可以对数组进行嵌套映射：

<tbody>
    {this.state.sampleData.map((a, i) => 
        <tr key={i}>
            {a.map((b, j) => <td key={j}>{b}</td>)}
        </tr>
    )}
</tbody>

在映射时，还应该注意将key属性添加到元素中。我在那里使用了索引，但如果它有任何值，你应该用数组中的唯一值替换它。

完整代码：

render() {
    return (
        <div>
            <CSVReader
                label="Select CSV file"
                onFileLoaded={this.handleFile}
            />
            <br />
            <p>Length: {this.state.sampleData[0].length}</p>
            <table>
                <thead>
                    <tr>{this.state.headers.map((a, i) => <th key={i}>{a}</th>)}</tr>
                </thead>
                <tbody>
                    {this.state.sampleData.map((a, i) => 
                        <tr key={i}>
                            {a.map((b, j) => <td key={j}>{b}</td>)}
                        </tr>
                    )}
                </tbody>
            </table>
        </div>
    )
}

请考虑更改变量名称，否则这种代码将很难维护。

0
投票

你可能想看看这个惊人的例子。 JS

var ResponsiveTable = React.createClass({
  _head: function() {
    var columns = _.

map(this.props.columns, function(colName) {
      return (
        <th>{colName}</th>
      );
    });
    return (
      <tr>{columns}</tr>
    );
  },

  _rows: function() {
    var _this = this;
    return _.map(_this.props.rows, function(row) {
      var values = _.map(_this.props.columns, function(colName, colKey) {
        return (
          <td data-label={colName}>{row[colKey]}</td>
        );
      })
      return (
        <tr>{values}</tr>
      );
    })
  },

  render: function() {
    return (
      <table className="responsive-table">
        <thead>
          {this._head()}
        </thead>
        <tbody>
          {this._rows()}
        </tbody>
      </table>
    );
  }
});

var cols = {
  payment: 'Payment',
  date: 'Processing Date',
  amount: 'Amount',
  payee: 'Payee'
}

var rows = [{
  payment: 'Payment #1',
  date: 'March 20, 1989',
  amount: '$29.99',
  payee: 'John Smith'
},{
  payment: 'Payment #2',
  date: 'March 22, 1989',
  amount: '$40.00',
  payee: 'Brandon Drew'
},{
  payment: 'Payment #3',
  date: 'April 2, 1989',
  amount: '$9.50',
  payee: 'Jackie Chan'
}]

React.render(
  <ResponsiveTable columns={cols} rows={rows} />,
  document.getElementById('table_container')
);

SCSS

body {
  font-family: "Gotham";
}

@xs_only: ~"screen and (max-width: 599px)";
@sm: ~"screen and (min-width: 600px)";

@light_grey_bg: #fafafa;
@light_grey_border: #ddd;

.responsive-table {
  width: 100%;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;

  thead {
    visibility: hidden;
    background: @light_grey_bg;
    @media @sm {
      visibility: visible;
    }
  }

  tr {
    border: 1px solid @light_grey_border;
    border-bottom: 2px solid @light_grey_border;
    padding: 5px;
    margin-bottom: 10px;
    display: block;
    @media @sm {
      display: table-row;
      border-bottom-width: 1px;
      margin-bottom: 0;

      &:nth-child(even) {
        background: @light_grey_bg;
      }
    }
  }

  th,
  td {
    padding: 10px;
    text-align: left;
  }

  th {
    text-transform: uppercase;
    font-size: 11px;
  }

  td {
    display: block;
    text-align: right;
    font-size: 13px;
    border-bottom: 1px dotted @light_grey_border;

    &:last-child {
      border-bottom: none;
    }

    @media @sm {
      display: table-cell;
      text-align: left;
      font-size: 14px;
      border-bottom: none;
    }
  }

  td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    @media @sm {
      content: "";
      display: none;
    }
  }
}

主文件

<div id="table_container">
  <!-- React renders here -->
</div>

如果这不起作用，你应该完全继续@ treycos的惊人答案。 :)

var ResponsiveTable = React.createClass({
  _head: function() {
    var columns = _.map(this.props.columns, function(colName) {
      return (
        <th>{colName}</th>
      );
    });
    return (
      <tr>{columns}</tr>
    );
  },
  
  _rows: function() {
    var _this = this;
    return _.map(_this.props.rows, function(row) {
      var values = _.map(_this.props.columns, function(colName, colKey) {
        return (
          <td data-label={colName}>{row[colKey]}</td>
        );
      })
      return (
        <tr>{values}</tr>
      );
    })
  },
  
  render: function() {
    return (
      <table className="responsive-table">
        <thead>
          {this._head()}
        </thead>
        <tbody>
          {this._rows()}
        </tbody>
      </table>
    );
  }
});
    
var cols = {
  payment: 'Payment',
  date: 'Processing Date',
  amount: 'Amount',
  payee: 'Payee'
}

var rows = [{
  payment: 'Payment #1',
  date: 'March 20, 1989',
  amount: '$29.99',
  payee: 'John Smith'
},{
  payment: 'Payment #2',
  date: 'March 22, 1989',
  amount: '$40.00',
  payee: 'Brandon Drew'
},{
  payment: 'Payment #3',
  date: 'April 2, 1989',
  amount: '$9.50',
  payee: 'Jackie Chan'
}]

React.render(
  <ResponsiveTable columns={cols} rows={rows} />,
  document.getElementById('table_container')
);
body {
  font-family: "Gotham";
}
.responsive-table {
  width: 100%;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
}
.responsive-table thead {
  visibility: hidden;
  background: #fafafa;
}
@media screen and (min-width: 600px) {
  .responsive-table thead {
    visibility: visible;
  }
}
.responsive-table tr {
  border: 1px solid #ddd;
  border-bottom: 2px solid #ddd;
  padding: 5px;
  margin-bottom: 10px;
  display: block;
}
@media screen and (min-width: 600px) {
  .responsive-table tr {
    display: table-row;
    border-bottom-width: 1px;
    margin-bottom: 0;
  }
  .responsive-table tr:nth-child(even) {
    background: #fafafa;
  }
}
.responsive-table th,
.responsive-table td {
  padding: 10px;
  text-align: left;
}
.responsive-table th {
  text-transform: uppercase;
  font-size: 11px;
}
.responsive-table td {
  display: block;
  text-align: right;
  font-size: 13px;
  border-bottom: 1px dotted #ddd;
}
.responsive-table td:last-child {
  border-bottom: none;
}
@media screen and (min-width: 600px) {
  .responsive-table td {
    display: table-cell;
    text-align: left;
    font-size: 14px;
    border-bottom: none;
  }
}
.responsive-table td:before {
  content: attr(data-label);
  float: left;
  text-transform: uppercase;
  font-weight: bold;
}
@media screen and (min-width: 600px) {
  .responsive-table td:before {
    content: "";
    display: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>

<div id="table_container">
  <!-- React renders here -->
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.