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)
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:
OriginalL'auteur napkinsterror | 2015-05-16
Vous devez vous connecter pour publier un commentaire.
<tr Population={zone.population} Zone={zone.name} />
ne semble pas valide Réagir composant pour moi. Les minuscules<tr>
indique que ce n'est pas un composant personnalisé, mais représente une norme HTML ligne de la table.<tr>
éléments nécessitent<td>
ou<th>
éléments à l'intérieur d'eux, par exemple:Vous pourrez extraire en un élément personnalisé:
Aussi, n'oubliez pas de donner des éléments générés à partir de l'intérieur d'un
map
/foreach
fonction d'unkey
attribut.OriginalL'auteur Michelle Tilley
J'ai fait de cette dynamique de données tableau avec des lignes et colonnes dynamiques modifiables
https://codepen.io/rohanarihant/pen/qmjKpj
OriginalL'auteur RohanArihant