如何把對象以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元素是很重要的。

我認爲你基本上是在錢上，除了你缺少classname和div標籤。