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

现在输出就是这个

在文件＆＃34;〜/ Scripts / Grid.jsx＆＃34;：解析错误：第26行：XJS值应该是表达式或引用的XJS文本（第26行第35行）行：52列：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元素。

我认为你基本上都是钱，除了你缺少classname和div标签。

如何将对象转换为HTML

1 个答案: