Wie Sie wissen, werden React-Komponenten parallel gerendert. Es gibt keine Garantie, dass sie das Rendern beenden.
Ich möchte die folgenden Komponenten in genau dieser Reihenfolge darstellen:
rendert. Ich brauche diesen Header, um zuerst zu rendern, damit ich nach der Wiedergabe in meinen anderen beiden Komponenten darauf reagieren kann. Ich werde JS darauf ausführen usw. später von den Komponenten componentDidMount der anderen beiden Komponenten, deshalb möchte ich das zuerst rendern)
Hier ist ein wenig mehr Kontext Ссылка
Ich habe eine Menge Dinge ausprobiert, wie Sie mit den Lebenszyklus-Methoden sehen können, was wahrscheinlich völlig falsch ist oder nicht einmal sicher ist, was die Leute überhaupt für ein solches Szenario tun, aber bisher kein Glück.
%Vor%UPDATE:
hier ist was ich versucht habe. Während sie alle 3 rendern, bekomme ich immer noch Zeiten, wo TableOfContents vor InterviewContentMain oder InterviewContent rendert, was TableOfContent nach gerenderten Überlappungen <p className="section-heading bold font-22" id="interview-heading">Interview</p> bedeutet, anstatt darunter zu rendern aufgrund der sticky JS, die ich in TableOfContents anzuwenden versuchte
Wenn Sie eine Komponente bedingt rendern möchten, müssen Sie sie in eine bedingte (ob eine Funktion oder einen booleschen Inline-Ausdruck) einfügen.
Sie sagen:
TableOfContents (sollte nur gerendert werden, nachdem InterviewContainer und InterviewContentMain gerendert wurden)
.. Überprüfen Sie also in der render -Methode von TableOfContents des übergeordneten Containers, ob einige Werte wahr sind, wie in einer if -Anweisung.
Sie rufen setState in componentDidMount auf. Nennen Sie es in componentWillMount . Es ist ein Anti-Pattern, das setState in componentDidMount sofort aufruft, weil componentDidMount das render aufruft, siehe diese Diskussion .
Ich habe eine etwas andere Syntax verwendet, aber es sollte klar verständlich sein.
%Vor%Tags und Links javascript reactjs