Как построить таблицу динамически

Question

Я пытаюсь построить таблицу с динамически reactJS но есть два вопроса, которые я не могу решить:

1. В компоненте GridList я получил эту строку <GridRow data={data1} key={i} /> я действительно не хочу, чтобы принести «global» var, но вместо этого используйте данные, которые отправляются методу? Как мне это сделать?
2. В GridRow мне нужно слишком цикл столбцов (как я сейчас), но мне нужно, чтобы получить правильное значение ячейки и право не я просто не получаю это исключение: Error while rendering "GridBox" to "react1": Unable to get property 'data' of undefined or null reference

Код

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() { 
     if(this.props.data){ 
      var Cell = this.props.data.Columns.map(function (column, i) { 
       return (
        <div className={column.HTMLClass}>{this.props.data.Cells[i]}</div> 
       ); 
      }) 
     } 
     return (
      <li>{Cell}</li> 
     ); 
    } 
}); 
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 (data, i) { 
       return (
        <GridRow data={data1} key={i} /> 
       ); 
      }); 
     } 
     return (
      <ul> 
       <li>{Header}</li> 
       {Row} 
      </ul> 
     ); 
    } 
}); 


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

Answer 1

Вы можете ссылаться только на то, что передано в функцию на карте, если вы не используете bind, который поддерживает экземпляр this, так что он будет таким же внутри компонента и функции, используемой в карте. Это позволит вам использовать this.props в вашей функции сопоставления.

С header использует то, что непосредственно передается в функцию в map, переплет не обязательно необходим. В row, чтобы получить доступ к this.props, функция должна быть связана. Например, если у вас somedata вы хотите получить доступ в this.props:

var header = this.props.data.Columns.map(function (columns) { 
    return (
     <GridHead data={columns} /> 
    ); 
}); 
var Row = this.props.data.Rows.map(function (data, i) { 
    return (
     <GridRow data={this.props.somedata} key={i} /> 
    ); 
}.bind(this)); 

отмечают, что в JSX регулярные имена переменных должны начинаться с буквы в нижнем регистре (как заголовок выше), в то время как имена компонентов должны начинаться с прописных букв.