web-dev-qa-db-fra.com

React: validateDOMNesting: #text ne peut pas apparaître en tant qu'enfant de <tr>

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

Code qui rend la table

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>
    )
}
}

A la fin, my table a la structure suivante 

 enter image description here

Où est le problème?

reactjswarnings
16
Bizon4ik

Le problème est les espaces dans cette ligne:

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

Cela peut sembler idiot, mais vous rendez en fait les cellules et quelques espaces blancs (c'est-à-dire du texte). Ça devrait ressembler à ça:

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

La réponse acceptée n'était pas la cause fondamentale dans mon cas. J'ai eu le même avertissement quand j'avais un commentaire après la balise <th>. L'avertissement a disparu quand j'ai enlevé le commentaire.

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

EDIT: Supprimer l’espace entre </th> et {/* fera également l'affaire.

4
Jarno Argillander

Dans mon cas, où était une sortie '' vide (sans espace à l'intérieur)

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

Le null fait le tour:

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

Cela se produit également lors de l'utilisation de l'opérateur AND (logique) AND court-circuit && pour afficher/masquer les lignes conditionnelles

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

changez-le en forme ternaire a ? b : c où c est null résoudra le problème

{
  foo ? (<tr><td>{foo}</td></tr>) : null
}
2
Kevin Law

Avertissement de notification: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>. Assurez-vous de ne pas laisser d'espace blanc supplémentaire entre les balises sur chaque ligne de votre code source . Dans mon cas, la variable d'initialisation ne devrait PAS être 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;

1
Đặng Xuân Trường

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

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

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

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

Si quelqu'un d'autre rencontrait cette erreur ou une erreur d'espacement similaire avec Material UI dans React, ma solution après des heures de rupture de code était un simple commentaire javascript dans mon tableau.

 { /*  sortable here */ }

J'ai enlevé ça entre mes éléments de table et l'avertissement a disparu.

0
paulzmuda