<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

C'est une contrainte des navigateurs. Vous devriez utiliser div ou article ou quelque chose comme ça dans la méthode de rendu de l'application, car de cette façon vous pouvez y mettre ce que vous voulez. Les balises de paragraphe ne peuvent contenir qu'un ensemble limité de balises (principalement des balises de formatage du texte). Vous ne pouvez pas avoir un div à l'intérieur d'un paragraphe

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

n'est pas du HTML valide. Selon les règles d'omission des balises énumérées dans la spécification, la balise <p> est automatiquement fermée par la balise <div> qui laisse la balise </p> sans une balise correspondante <p> . Le navigateur a tout à fait le droit de tenter de corriger ce problème en ajoutant une option ouverte. <p> après la balise <div> :

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

Vous ne pouvez pas mettre un <div> à l'intérieur d'un <p> et obtenir des résultats cohérents de la part des différents navigateurs. Fournissez aux navigateurs du HTML valide et ils se comporteront mieux.

Vous pouvez mettre <div> à l'intérieur d'un <div> donc si vous remplacez votre <p> avec <div class="p"> et le styliser de manière appropriée, vous pouvez obtenir ce que vous voulez.

Answer 2

L'avertissement apparaît uniquement parce que le code de démonstration a :

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>  // <==NOTE P TAG HERE
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

En le changeant comme ça, on s'en occupe :

function TabPanel(props) {
    const {children, value, index, classes, ...other} = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`simple-tabpanel-${index}`}
            aria-labelledby={`simple-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Container>
                    <Box>   // <== P TAG REMOVED
                        {children}
                    </Box>
                </Container>
            )}
        </div>
    );
}

Answer 3

J'ai obtenu ceci en utilisant un react-boostrap <Card.Text> d'un composant dans React. Aucun de mes composants n'était dans des balises p. <Card.Text> s'affiche par défaut comme une balise

dans l'arborescence HTML une fois rendue et, en fait, avoir un composant React personnalisé qui renvoie ses éléments jsx dans une balise <div> il provoque un <p><div>...</div></p> ce qui est un mauvais HTML. Pour résoudre ce problème, si l'on utilise <Card.Text>, on peut utiliser l'attribut 'as' comme suit <Card.Text as='div'> et cela résoudra l'avertissement parce qu'il permet un arbre tel que <div><div></div></div>

Answer 4

J'ai eu un problème similaire et j'ai enveloppé le composant dans "div" au lieu de "p" et l'erreur a disparu.

Answer 5

J'ai obtenu cela en utilisant un composant personnalisé à l'intérieur d'une <Card.Text> section d'un <Card> dans React. Aucun de mes composants n'était dans des balises p