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 SomeComponent
und SomeOtherComponent
. Letzteres verwendet jedoch eine externe Abhängigkeit ( ReactTooltip
von 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.value
und 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.
Antworten:
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 descomponent
Attributs des<Typography>
Elements ändern :Gemäß den Typografie-Dokumenten:
Typografie wird also
<p>
als sinnvolle Standardeinstellung ausgewählt, die Sie ändern können. Kann mit Nebenwirkungen kommen ... hat bei mir funktioniert.quelle
<Typography component={'div'}>
und es funktioniert jetzt ohne Warnungen. Vielen Dank, dass Sie mich auf den richtigen Weg gebracht haben!Basierend auf der Warnmeldung rendert die Komponente ReactTooltip einen HTML-Code, der folgendermaßen aussehen könnte:
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 dasdiv
Tag 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.
quelle
div
sollten, um die Chance zu haben, in a verwendet zu werdenp
? Es scheint angesichts dessen, wie beliebtdiv
s für das willkürliche Verpacken von Sachen waren, zu fliegen ?div
eine mitspan
dieser Art von Warnung zu vermeiden , aber ohne etwas in der Logik des Codes zu beeinflussen.Wenn Sie suchen, wo dies geschieht, können Sie in der Konsole Folgendes verwenden:
document.querySelectorAll(" p * div ")
quelle
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.quelle
<Typography component={'div'}>
und es funktioniert jetzt ohne Warnungen. Vielen Dank, dass Sie mich auf den richtigen Weg gebracht haben!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:Tatsächlich tritt diese Warnung auf, weil in der Material-Benutzeroberfläche das Standard-HTML-Tag der
Grid
Komponente eindiv
Tag und das Standard-Typography
HTML-Tag einp
Tag ist. Nun geschieht die Warnung:quelle
Ich hatte ein ähnliches Problem und wickelte die Komponente in "div" anstelle von "p" ein, und der Fehler verschwand.
quelle
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
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 :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.quelle
Wenn Sie verwenden
ReactTooltip
, um die Warnung auszublenden, können Sie jetzt einewrapper
Requisite mit dem folgenden Wert hinzufügenspan
:Da
span
es sich um ein Inline-Element handelt, sollte es sich nicht mehr beschweren.quelle
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-Tagsquelle
Die Warnung wird nur angezeigt, weil der Demo-Code Folgendes enthält:
Wenn Sie es so ändern, wird es erledigt:
quelle