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

时间：2019-03-05 12:56:05

标签： html reactjs csv

我有这个问题，我尝试用React将csv数据放到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>
    )
}

2 个答案:

答案 0 :(得分：0)

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

Traceback (most recent call last):
  File "C:/Users/cjr/PycharmProjects/DynamoForum/DynamoForum.py", line 17, in <module>
    wait(DynamoForum, 10).until(EC.frame_to_be_available_and_switch_to_it(DynamoForum.find_element_by_xpath("//iframe[@id='destination_publishing_iframe_autodesk_0']")))
  File "C:\Users\cjr\PycharmProjects\DynamoForum\venv\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 394, in find_element_by_xpath
    return self.find_element(by=By.XPATH, value=xpath)
  File "C:\Users\cjr\PycharmProjects\DynamoForum\venv\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 978, in find_element
    'value': value})['value']
  File "C:\Users\cjr\PycharmProjects\DynamoForum\venv\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 321, in execute
    self.error_handler.check_response(response)
  File "C:\Users\cjr\PycharmProjects\DynamoForum\venv\lib\site-packages\selenium\webdriver\remote\errorhandler.py", line 242, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//iframe[@id='destination_publishing_iframe_autodesk_0']"}
  (Session info: chrome=72.0.3626.119)
  (Driver info: chromedriver=73.0.3683.20 (8e2b610813e167eee3619ac4ce6e42e3ec622017),platform=Windows NT 10.0.17134 x86_64)

在映射元素时，还应谨慎添加<tbody> {this.state.sampleData.map((a, i) => <tr key={i}> {a.map((b, j) => <td key={j}>{b}</td>)} </tr> )} </tbody> 属性到元素。我在这里使用了索引，但是如果有索引，则应该用数组中的唯一值替换它。

完整代码：

key

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

答案 1 :(得分：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>

相关问题
最新问题