<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 vous utilisez ReactTooltip pour faire disparaître l'avertissement, vous pouvez désormais ajouter un wrapper avec une valeur de span comme ceci :

<ReactTooltip wrapper="span" />

Depuis le span est un élément inline, il ne devrait plus se plaindre.

Answer 2

J'ai obtenu cette erreur lors de l'utilisation de Chakra UI dans React en faisant du style en ligne pour du texte. La façon correcte de faire le style en ligne était d'utiliser l'élément span, comme d'autres l'ont dit pour d'autres cadres de style. Le code correct :

<Text as="span" fontWeight="bold">
    Bold text
    <Text display="inline" fontWeight="normal">normal inline text</Text>
</Text>

Answer 3

Je suis en retard sur ce sujet. Cette erreur m'est arrivée aussi et la raison pour laquelle elle s'est produite est que j'utilisais react material TAB. Dans ce cas, nous utilisons quelque chose comme ça et nous enveloppons nos props enfants à l'intérieur de {children}. La raison pour laquelle elle s'est produite est que react ne considère pas comme tel, remplacer cela par ça marche.