如何将对象变成 HTML

Question

我如何得到这个：

<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} />
        );
    }
});

现在的输出是这样的

In file "~/Scripts/Grid.jsx": Parse Error: Line 26: XJS value should be either an expression or a quoted XJS text (at line 26 column 35) Line: 52 Column:3

Answer 1

正如您最初提出的问题只是与 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 标签。

如何将对象变成 HTML

How to turn objects in to HTML

javascript

reactjs

react-jsx