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

107

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.

Sander Verhagen
quelle
1
Verwandte Ausgabe: github.com/wwayne/react-tooltip/issues/210
Jordan Running

Antworten:

104

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.

Zayquan
quelle
Es ist in Bezug auf SEO unglücklich, besonders wenn Sie möchten, dass die Komponente ein Header ist (erkannt werden soll), aber mit einer Variante von so etwas wie h4.
Pfeds
Wenn Sie weiter herumfummeln, können Sie anscheinend ein Root-Typografieelement mit der Variante = "erben" (dh auf Seitenebene) und dann eine Untertypografiekomponente = "h1", Variante = "h5" haben. Es scheint zu funktionieren, aber ich bin nicht ganz sicher, ob ich Typografie richtig
benutze
5
Ich habe verwendet <Typography component={'div'}>und es funktioniert jetzt ohne Warnungen. Vielen Dank, dass Sie mich auf den richtigen Weg gebracht haben!
JohnK
Ich brauchte eine Typografie, um mein Div zu kapseln, damit mein Text korrekt auf der Seite angezeigt wurde. Ohne es als übergeordnetes Element schien sich meine CSS-Klasse nicht richtig zu registrieren, seltsam, oder? Dies funktionierte jedoch wie ein Zauber, das CSS wurde registriert und meine Fehler wurden beseitigt, Süße!
C. Gadd
1
Dies ist eine
zeitsparende
71

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.

JD Hernandez
quelle
Also, ja, ich habe verstanden, was gerendert wurde, aber würden Sie dann sagen, dass alle Komponenten, die a rendern, überarbeitet werden divsollten, um die Chance zu haben, in a verwendet zu werden p? Es scheint angesichts dessen, wie beliebt divs für das willkürliche Verpacken von Sachen waren, zu fliegen ?
Sander Verhagen
2
Ich denke schon, da es in der w3c Empfehlung steht. Auch konnten wir leicht einen Ersatz diveine mit spandieser Art von Warnung zu vermeiden , aber ohne etwas in der Logik des Codes zu beeinflussen.
JD Hernandez
1
Wenn Sie diesen Fehler erhalten, wenn Sie die Material-Benutzeroberfläche <Typografie> direkt verwenden, können Sie die "Komponente" ändern, die ich unten in meiner Antwort beschreibe. Hoffe das hilft
zayquan
Versuchen Sie, <span> anstelle von <div> in Ihrem <p> zu verwenden. Dies sollte das Problem beheben. Ich bin auf diesen Fehler gestoßen, indem ich <div> zum Anzeigen eines Bildes verwendet habe, dessen Quelle von einer übergeordneten CSS-Klasse angegeben wurde.
Christopher Stock
17

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

Alex C.
quelle
16

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.

Dion Duimel
quelle
4
Ich habe verwendet <Typography component={'div'}>und es funktioniert jetzt ohne Warnungen. Vielen Dank, dass Sie mich auf den richtigen Weg gebracht haben!
JohnK
7

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>
AmerllicA
quelle
In kurzen Worten Material UI hat Fehler?
Ero Stefano
1
Nein, lieber @EroStefano, dies ist beabsichtigt, dass der Entwickler die Regel der Hierarchie der Inline- und Blockebenen befolgt.
AmerllicA
4

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

jbluft
quelle
4

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.

Jithu
quelle
Wie verfolgst du das? Die Fehler stehen an
ichimaru
2

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.

Nicco
quelle
Du bist der Beste, mein Freund, der Beste der Besten. Ich liebe dich.
AmerllicA
2

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

BitShift
quelle
0

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>
    );
}
VikR
quelle