javascript - 从reactJS中的json响应创建动态表

Question

我是 React 和 UI 新手，我想根据对服务器的 ajax 调用收到的 JSON 响应创建一个漂亮的表。我怎样才能做到这一点。

任何类型的信息都会非常有帮助。

var Contact = React.createClass({
getInitialState: function(){
  return {}
},

submit: function (e){
  var self

  e.preventDefault()
  self = this

  console.log(this.state);

  var data = {
    Id: this.state.name,
    User: this.state.email,

  }

  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'http://localhost:8080/ui/start',
    data: JSON.stringify({
      Id: this.state.name,
      User: this.state.email,
    })
  })
  .done(function(response) {
  console.log(response);

  // This is where I have the JSON response .How can I create a dynamic table from this response **strong text**and render in on UI.  //
 } 

我的回复如下所示:{'name':'divya','id':'1','task':'xyz'}

谢谢。

Answer 1

我是 React 新手，但一直在寻找同样的东西，我希望这可以帮助其他人更快地获得他们需要的结果。我花了一整天的时间寻找这样可行的东西。

我确实想归功于这个家伙，他的 jsfiddle 为我指明了正确的方向:http://jsfiddle.net/jhudson8/dahdx6eu/

虽然这对我有用，但您必须先做一些事情。1. 创建一个状态，我将其称为“加载”，并按照以下说明在获取初始状态中将其设置为 true:React iterate over object from json data 。2.我确信这段代码可以使用粗箭头函数等进行一些擦洗。无论如何，它并不完美。

var GeneralTable = React.createClass({

    generateRows: function() {
      if (this.props.loading === false) {
        var cols = Object.keys(this.props.books[0]), data = this.props.books;
        return data.map(function(item) {
            var cells = cols.map(function(colData) {
                return <td> {item[colData]} </td>;
            });
            return <tr key={item.id}> {cells} </tr>;
        });
      }
    },
    render: function() {
      let rowComponents = this.generateRows();
      let table_rows = []
      let table_headers = [];
      let data = this.props.books;

      if (this.props.loading === false) {
        let headers = Object.keys(this.props.books[0]);
        headers.forEach(header => table_headers.push(<th key={header}>{header}</th>));
        data.forEach(book => table_rows.push(<BookTableRow key={book.id} book={book} />));
      }
      return (
          <Table striped bordered>
              <thead><tr>{table_headers}</tr></thead>
              <tbody> {rowComponents} </tbody>
          </Table>
      );
    },
});