Réagir: validateDOMNesting: #texte ne peut pas apparaître comme un enfant de <tr>

Pouvez-vous m'expliquer pourquoi réagir afficher l'avertissement Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text.? Je ne vois pas de texte à l'intérieur de la balise tr

Code qui rend le tableau

export default class AllCarWashTable extends React.Component{
constructor(props) {
super(props);
this.generateHeaders = this.generateHeaders.bind(this);
this.generateRows = this.generateRows.bind(this);
};
static propTypes = {
cols : React.PropTypes.array.isRequired,
rows : React.PropTypes.array.isRequired
}
generateHeaders() {
let cols = this.props.cols;  //[{key, label}]
return cols.map(function(colData) {
return <th key={colData.key}> {colData.label} </th>;
});
}
generateRows() {
let cols = this.props.cols,  //[{key, label}]
data = this.props.rows;
if (this.props.rows.length > 0) {
return data.map(function(item) {
var cells = cols.map(function(colData) {
return <td key={colData.key}> {item[colData.key]} </td>;
});
return <tr key={item.id}> {cells} </tr>;
});
}
}
render(){
let headers = this.generateHeaders();
let rows = this.generateRows();
return (
<table className="table table-hove">
<thead>
<tr>
{headers}
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
)
}
}

À la fin, ma table a la structure suivante

Réagir: validateDOMNesting: #texte ne peut pas apparaître comme un enfant de <tr>

Où est le problème?

InformationsquelleAutor Bizon4ik | 2016-10-07
  1. 30

    Le problème est que les espaces dans cette ligne:

    return <tr key={item.id}> {cells} </tr>;

    Il peut paraître idiot, mais vous êtes réellement rendu les cellules et certains espaces (c'est à dire le texte). Il devrait ressembler à ceci:

    return <tr key={item.id}>{cells}</tr>;
    InformationsquelleAutor tobiasandersen
  2. 8

    Dans mon cas, où était vide '' de sortie (w\o espace à l'intérieur)

    <tbody>
{this.props.orders.map(
order =>this.props.selectedAgent === order.agent ? 
<Row item={order} key={ order._id } /> : ''
)
}
</tbody>

    La null fait le truc:

    <tbody>
{this.props.orders.map(
order =>this.props.selectedAgent === order.agent ? 
<Row item={order} key={ order._id } /> : null
)
}
</tbody>
    InformationsquelleAutor Victor
  3. 8

    Cela se produit également lors de l'utilisation de logique ET de court-circuit && pour afficher/masquer la ligne conditionnelle:

    {
foo && (<tr><td>{foo}</td></tr>)
}

    changer en ternaire a ? b : c forme où c est null corriger

    {
foo ? (<tr><td>{foo}</td></tr>) : null
}
    InformationsquelleAutor Kevin Law
  4. 4

    Accepté la réponse n'était pas la cause de racine dans mon cas. J'ai eu le même avertissement lorsque j'ai eu un commentaire après <th> tag. L'avertissement a disparu lorsque j'ai enlevé le commentaire.

    const TableHeaders = (props) => (
<tr>
<th>ID</th> {/* TODO: I had a comment like this */}
</tr>
)

    EDIT: Suppression de l'espace entre </th> et {/* feront aussi l'affaire.

    • Celui qui a donné -1, pensez-vous pourquoi?
    InformationsquelleAutor Jarno Argillander
  5. 1

    Notification d'avertissement: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>. Assurez-vous que vous n'avez pas d'espace blanc entre les balises sur chaque ligne de votre code source.
    Dans mon cas, d'initialiser la variable ne doit PAS se null.

     let elementCart = ''; {/* in the here,warning will append  */}
if(productsCart.length > 0){
elementCart = productsCart.map((item, index) => {
return <CartItem item={item} key={index} index={index} />
});
}
return(
<tbody id="my-cart-body">
{elementCart}
</tbody>
)

    Solution: let elementCart = null;

    InformationsquelleAutor Đặng Xuân Trường
  6. 0

    En plus de @Jarno réponse, j'ai aussi rencontré ce problème. Vérifiez que vous n'avez pas tout supplémentaire } ou { à la fin de votre code javascript:

    {this.props.headers.map(header => <th key={header}>{header}</th>)}}
↑
    InformationsquelleAutor FrankerZ
  7. 0

    J'ai reçu cet avertissement lorsque j'ai eu une parenthèse au lieu d'une accolade

    <table>
<tbody>
<tr>
(showMsg && <td>Hi</td>} // leading '(' should be a '{'
</td>
</tbody>
</table>
    InformationsquelleAutor lukeaus
  8. 0

    Au cas où quelqu'un d'autre vient à travers cette erreur ou un similaire, les espaces d'erreur avec le Matériel de l'INTERFACE utilisateur de Réagir, ma solution après des heures de briser mon code javascript simple commentaire à l'intérieur de ma table.

     { /*  sortable here */ }

    Je supprimés entre mes éléments de la table et l'avertissement disparu.

    InformationsquelleAutor paulzmuda