React.js création d'une table avec une quantité dynamique de lignes avec une colonne modifiable

Je suis en train de créer un react.js le tableau qui se synchronise avec une notice de la carte. J'ai ces données et je suis en mesure d'obtenir les données correctement, mais je ne peux pas créer une table correctement. Je suis capable de voir les en-têtes parce qu'ils sont codés en dur, mais je ne suis pas en mesure de voir les lignes. J'ai aussi une photo pour expliquer les données dans la console.journal (le) points dans le code. Voici le code:

/* Table React Component */
var TABLE_CONFIG = {
sort: { column: "Zone", order: "desc" },
columns: {
col1: { name: "Zone", filterText: "", defaultSortOrder: "desc" },
col2: { name: "Population", filterText: "", defaultSortOrder: "desc" }
}
};
var Table = React.createClass({
getInitialState: function() {
var tabledata = [];
var length = _.size(testJSON.zones);
for(i = 0; i < length; i++) {
var name = _.keys(testJSON.zones)[i];
var population = testJSON.zones[name].population.value;
if(name == "default") {
population = testJSON.zones[name].population.default.value;
}
tabledata[i] = {name, population};
}
console.log(tabledata);
return {zones: tabledata};
},
render: function() {
var rows = [];
this.state.zones.forEach(function(zone) {
rows.push(<tr Population={zone.population} Zone={zone.name} />);
}.bind(this));
console.log(rows);
return (
<table>
<thead>
<tr>
<th>Zone</th>
<th>Population</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
});

Ici vous pouvez voir la console.log(tabledata) ligne au complet ainsi que le premier objet de console.log(rows)

React.js création d'une table avec une quantité dynamique de lignes avec une colonne modifiable

Je voudrais voir quelque chose comme l'image ci-dessous. Veuillez noter que je veux de la Zone de la colonne de ne pas être modifiable d'entrée, mais la population d'être modifiable:

React.js création d'une table avec une quantité dynamique de lignes avec une colonne modifiable

Ici est assez succincte exemple de la création d'un simple composant de tableau de Réagir. Il m'a aidé. gist.github.com/ChaseWest/1935d08b156ae04b85d2

OriginalL'auteur napkinsterror | 2015-05-16