J'ai un composant de table HTML ReactJS et je met à jour son contenu (valeurs de cellule) avec la méthode setState
. Voici le code de base:
var Cell = React.createClass({ render: function () { return (<td>{this.props.cellValue}</td>); } }); var Row = React.createClass({ render: function () { return (<tr>{this.props.row}</tr>); } }); var Table = React.createClass({ getInitialState: function() { return { data: this.props.data }; }, render: function () { return ( <table> { this.state.data.map(function(row) { var r = row.map(function(cell) { return <Cell cellValue={cell}/>; }); return (<Row row={r}/>); }) } </table> ); }});
Vous l'utiliseriez comme suit:
var initialData = [[1,2,3],[4,5,6],[7,8,9]]; var table = React.renderComponent( <Table data={initialData} />, document.getElementById('table') );
Cela fonctionne la plupart du temps. Je peux modifier les données en faisant cela (quelque part dans une fonction ou autre):
var newData = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]]; table.setState({data : newData});
Comme vous pouvez le voir, il ajoute une ligne à la fin de la table. Cependant, si j'essaie de définir les données initiales après cette mise à jour ou de raccourcir le nombre de lignes en définissant des data
dans un tableau plus petit (p. Ex. [[1, 2, 3], [4, 5, 6]]
qui devrait Supprimer la dernière ligne):
table.setState({data : initialData});
Je reçois cette erreur:
TypeError: updatedChildren [j] est indéfini updatedChildren [j] .parentNode.removeChild (updatedChildren [j]);
D'où est ce que ça vient?
Certains navigateurs (testés avec Firefox et Chrome) ajoutent automatiquement <tbody>...</tbody>
à une table HTML qui ne les possède pas. En les ajoutant dans le composant de ma table, corrigez le problème:
render: function () { return ( <table><tbody> { ... same code as before ... } </tbody></table> );
Si vous regardez le code html généré par React, vous pouvez remarquer qu'il ajoute certains attributs de données ( data-reactid
) à toutes les balises HTML rendues par un composant React (pour plus d'informations sur l'attribut données en général: cliquez ici ). Étant donné que les <tbody>...</tbody>
pas d'un composant React, ils n'avaient aucune data-reactid
et ces attributs permettent de réagir pour suivre les nœuds DOM.
Quoi qu'il en soit, merci à ces personnes qui ont parlé de cette question. Voici le lien https://groups.google.com/forum/#!topic/reactjs/NLs-PdrdDMA .
En savoir plus sur les data-reactid
: https://groups.google.com/forum/#!topic/reactjs/ewTN-WOP1w8 .