<div> kann nicht als Nachkomme von <p> angezeigt werden

Ich sehe das. Es ist kein Rätsel, worüber es sich beschwert:

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

Ich bin der Autor von SomeComponentund SomeOtherComponent. Letzteres verwendet jedoch eine externe Abhängigkeit ( ReactTooltipvon react-tooltip). Es ist wahrscheinlich nicht wesentlich, dass dies eine externe Abhängigkeit ist, aber ich kann hier das Argument versuchen, dass es sich um "einen Code handelt, der außerhalb meiner Kontrolle liegt".

Wie besorgt sollte ich über diese Warnung sein, da die verschachtelte Komponente (scheinbar) einwandfrei funktioniert? Und wie würde ich das überhaupt ändern (vorausgesetzt, ich möchte keine externe Abhängigkeit erneut implementieren)? Gibt es vielleicht ein besseres Design, das mir noch nicht bekannt ist?

Der Vollständigkeit halber ist hier die Implementierung von SomeOtherComponent. Es wird nur gerendert this.props.valueund wenn der Mauszeiger darüber bewegt wird: ein Tooltip mit der Aufschrift "Einige Tooltip-Meldungen":

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

Danke dir.

Wenn dieser Fehler bei Verwendung der Material-Benutzeroberfläche <Typography> https://material-ui.com/api/typography/ auftritt , können Sie den Fehler leicht in a ändern <p>, <span>indem Sie den Wert des componentAttributs des <Typography>Elements ändern :

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

Gemäß den Typografie-Dokumenten:

Komponente: Die für den Stammknoten verwendete Komponente. Entweder eine Zeichenfolge zur Verwendung eines DOM-Elements oder einer Komponente. Standardmäßig ordnet es die Variante einer guten Standard-Überschriftenkomponente zu.

Typografie wird also <p>als sinnvolle Standardeinstellung ausgewählt, die Sie ändern können. Kann mit Nebenwirkungen kommen ... hat bei mir funktioniert.

Basierend auf der Warnmeldung rendert die Komponente ReactTooltip einen HTML-Code, der folgendermaßen aussehen könnte:

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

Gemäß diesem Dokument kann ein <p></p>Tag nur Inline-Elemente enthalten. Das bedeutet, dass das Einfügen eines <div></div>Tags nicht korrekt sein sollte, da das divTag ein Blockelement ist. Eine unsachgemäße Verschachtelung kann zu Störungen wie dem Rendern zusätzlicher Tags führen , die sich auf Ihr Javascript und CSS auswirken können.

Wenn Sie diese Warnung entfernen möchten, können Sie die ReactTooltip-Komponente anpassen oder warten, bis der Ersteller diese Warnung behoben hat.

Wenn Sie suchen, wo dies geschieht, können Sie in der Konsole Folgendes verwenden: document.querySelectorAll(" p * div ")

Ihre Komponente wird möglicherweise in einer anderen Komponente (z. B. a <Typography> ... </Typography>) gerendert . Daher wird Ihre Komponente in eine Datei geladen, <p> .. </p>die nicht zulässig ist.

Fix: Entfernen, <Typography>...</Typography>da dies nur für einfachen Text innerhalb eines <p>...</p>oder eines anderen Textelements wie Überschriften verwendet wird.

Ich habe diese Warnung erhalten, indem ich Komponenten der Material-Benutzeroberfläche verwendet habe . Dann habe ich die component="div"as-Requisite auf den folgenden Code getestet und alles wurde korrekt:

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

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

Tatsächlich tritt diese Warnung auf, weil in der Material-Benutzeroberfläche das Standard-HTML-Tag der GridKomponente ein divTag und das Standard- TypographyHTML-Tag ein pTag ist. Nun geschieht die Warnung:

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

Ich hatte ein ähnliches Problem und wickelte die Komponente in "div" anstelle von "p" ein, und der Fehler verschwand.

Dies ist eine Einschränkung von Browsern. Sie sollten div oder article oder ähnliches in der Rendermethode der App verwenden, da Sie auf diese Weise alles einfügen können, was Sie möchten. Absatz-Tags dürfen nur eine begrenzte Anzahl von Tags enthalten (meistens Tags zum Formatieren von Text. Sie können kein Div in einem Absatz haben

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

ist kein gültiger HTML-Code. Gemäß den in der Spezifikation aufgeführten Auslassungsregeln für <p>Tags wird das Tag automatisch vom <div>Tag geschlossen , wodurch das </p>Tag ohne Übereinstimmung bleibt <p>. Der Browser hat das Recht, zu versuchen, ihn durch Hinzufügen eines offenen <p>Tags nach dem <div>folgenden zu korrigieren :

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

Sie können kein <div>Inside a einfügen <p>und konsistente Ergebnisse von verschiedenen Browsern erhalten. Stellen Sie den Browsern gültigen HTML-Code zur Verfügung, damit sie sich besser verhalten.

Sie können setzen <div>innen ein , <div>obwohl so , wenn Sie Ihren ersetzen <p>mit <div class="p">und Stil es angemessen, können Sie bekommen , was Sie wollen.

Wenn Sie verwenden ReactTooltip, um die Warnung auszublenden, können Sie jetzt eine wrapperRequisite mit dem folgenden Wert hinzufügen span:

<ReactTooltip wrapper="span" />

Da spanes sich um ein Inline-Element handelt, sollte es sich nicht mehr beschweren.

Ich habe dies durch die Verwendung einer benutzerdefinierten Komponente in einem <Card.Text>Abschnitt einer <Card>Komponente in React erhalten. Keine meiner Komponenten befand sich in p-Tags

Die Warnung wird nur angezeigt, weil der Demo-Code Folgendes enthält:

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}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

Wenn Sie es so ändern, wird es erledigt:

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>
                        {children}
                    </Box>
                </Container>
            )}
        </div>
    );
}