javascript - 如何将对象转换为HTML

我如何得到这个：

<li>
 <div class='myClass1'>myData1</div>
 <div class='myClass2'>myData2</div>
 <div class='myClass3'>myData3</div>
 <div class='myClass4'>myData4</div>
</li>

从此代码

var data1 = {"Columns":[{"Title":"Title1","HTMLClass":"g1_Title"},{"Title":"Title2","HTMLClass":"g2_Title"},{"Title":"Title3","HTMLClass":"g3_Title"}],"Rows":[{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]}]};



var GridRow = React.createClass({
    render: function() {
        var data = [], columns;

        // puts all the data in to a better structure (ideally the props would have this structure or this manipulation would be done on onReceiveProps)
        if(this.props.columns){
            for(var ii = 0; ii < this.props.columns.length; ii++){
                data.push({
                    class: this.props.columns[i].HTMLClass,
                    contents: this.props.Cell[i]
                })
            }
        }

        // Its best to map JSX elements and not store them in arrays
        columns = data.map(function(col) {
            return <div className= + {col.class}> {col.contents} </div>;
        });

        return (
            <div>
                <li>
                    {columns}
                </li>
            </div>
        );
    }
});
var GridHead = React.createClass({
    render: function() {
        if(this.props.data){
            var cell = this.props.data.Title;
            var htmlClass = this.props.data.HTMLClass;
        }
        return (
            <div className={htmlClass}>{cell}</div>
        );
    }
});
var GridList = React.createClass({
    render: function() {
        if(this.props.data){
            var header = this.props.data.Columns.map(function (columns) {
                return (
                    <GridHead data={columns} />
                );
            });
            var row = this.props.data.Rows.map(function (row, i) {
                return (
                    <GridRow columns={data1.Columns} cells={row.Cells}  key={i} />
                );
            });
        }
        return (
            <ul>
                <li>{header}</li>
                {row}
            </ul>
        );
    }
});


var GridBox = React.createClass({
    render: function(){
        return (
            <GridList data={data1} />
        );
    }
});

现在的输出是这个


  在文件“〜/ Scripts / Grid.jsx”中：解析错误：第26行：XJS值应
  可以是表达式或带引号的XJS文本（在第26行的第35列）
  行：52列：3

最佳答案

正如您最初提出的问题只是与GridRow组件有关，而我没有触及任何其他组件。

您的主要问题是您正在GridRow组件中分配className = + //something，这不是正确的分配方式。还有其他错误，例如缺少div标签。

更好的GridRow

装入组件后，将创建一个columndata变量，并使用formatData();填充格式化的数据。

我不建议您在此组件中进行数据格式化（尽管这是可行的）。您应该在顶级组件处格式化数据并传递格式化后的数据，或者以正确的结构接受数据。

我的GridRow组件与此：

var GridRow = React.createClass({
  componentWillMount: function() {
      this.columndata = [];
      this.formatData();
  },

  formatData: function() {  // Formats prop data into something manageable
    if (this.props.columns && this.props.cells) {
            for(var ii = 0; ii < this.props.columns.length; ii++){
                this.columndata.push({
                    class: this.props.columns[ii].HTMLClass,
                    contents: this.props.cells[ii]
                })
            }
      this.forceUpdate();   // Forces a rerender
    }

  },

  componentDidUpdate: function(prevProps, prevState) {
      // If this component receives the props late
      if (!prevProps.cells && !prevProps.columns) {
        this.formatData();
      }
  },

  render: function() {
      var columns;

      // Its best to map JSX elements and not store them in arrays
      columns = this.columndata.map(function(col) {
          return <div className={col.class}> {col.contents} </div>;
      });

      return (
          <div>
              <li>
                  {columns}
              </li>
          </div>
      );
  }
});

我认为必须注意，您应该避免将JSX元素存储在数组中，这一点很重要。

我想您基本上可以赚钱了，除了您缺少类名和div标签。