<div> ne peut pas apparaître comme un descendant de <p>.

Question

Je vois ça. Ce n'est pas un mystère ce dont il se plaint :

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div.

Je suis l'auteur de SomeComponent et SomeOtherComponent . Mais ce dernier utilise une dépendance externe ( ReactTooltip de react-tooltip ). Il n'est probablement pas essentiel qu'il s'agisse d'une dépendance externe, mais cela me permet d'essayer l'argument selon lequel il s'agit d'un "code qui échappe à mon contrôle".

Devrais-je m'inquiéter de cet avertissement, étant donné que le composant imbriqué fonctionne parfaitement (apparemment) ? Et comment pourrais-je le modifier de toute façon (si je ne veux pas réimplémenter une dépendance externe) ? Existe-t-il une meilleure conception dont je ne suis pas encore conscient ?

Par souci d'exhaustivité, voici l'implémentation de la fonction SomeOtherComponent . Il rend juste this.props.value et, lorsqu'elle est survolée, une infobulle indiquant "Some tooltip message" :

class SomeOtherComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {value, ...rest} = this.props;
    return <span className="some-other-component">
      <a href="#" data-tip="Some tooltip message" {...rest}>{value}</a>
      <ReactTooltip />
    </span>
  }
}

Merci.

Answer 1

Si cette erreur se produit lors de l'utilisation de Material UI <Typography> https://material-ui.com/api/typography/ alors vous pouvez facilement changer le <p> à un <span> en modifiant la valeur de l'élément component de l'attribut <Typography> élément :

<Typography component={'span'} variant={'body2'}>

Selon la documentation sur la typographie :

component : Le composant utilisé pour le noeud racine. Soit une chaîne pour utiliser un élément DOM ou un composant. Par défaut, il fait correspondre la variante à un bon composant de titre par défaut.

Donc la typographie est en train de choisir <p> comme une valeur par défaut raisonnable, que vous pouvez modifier. Cela peut avoir des effets secondaires... mais cela a fonctionné pour moi.

Answer 2

Sur la base du message d'avertissement, le composant ReactTooltip rend un HTML qui pourrait ressembler à ceci :

<p>
   <div>...</div>
</p>

Selon cette document , a <p></p> ne peut contenir que des éléments en ligne. Cela signifie qu'il faut mettre un <div></div> à l'intérieur de celui-ci devrait être inapproprié, puisque la balise div est un élément de bloc. Une imbrication incorrecte peut provoquer des problèmes de rendu, par exemple étiquettes supplémentaires ce qui peut affecter votre javascript et css.

Si vous voulez vous débarrasser de cet avertissement, vous pouvez personnaliser le composant ReactTooltip, ou attendre que le créateur corrige cet avertissement.

Answer 3

Si vous cherchez où cela se passe, dans la console vous pouvez utiliser : document.querySelectorAll(" p * div ")

Answer 4

J'ai obtenu cet avertissement en utilisant Material UI puis je teste les component="div" comme prop au code ci-dessous et tout est devenu correct :

import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';

<Typography component="span">
  <Grid component="span">
    Lorem Ipsum
  </Grid>
</Typography>

En fait, cet avertissement se produit parce que dans l'interface matérielle, la balise HTML par défaut de l'option Grid Le composant est div et la balise par défaut Typography La balise HTML est p tag, Donc maintenant l'avertissement arrive,

Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>

Answer 5

Votre composant peut être rendu à l'intérieur d'un autre composant (tel qu'une <Typography> ... </Typography> ). Par conséquent, il chargera votre composant dans un <p> .. </p> ce qui n'est pas autorisé.

Réparez : Supprimer <Typography>...</Typography> parce qu'elle n'est utilisée que pour le texte brut à l'intérieur d'un fichier de type <p>...</p> ou tout autre élément de texte tel que les titres.