Ich habe eine komplexe Webseite mit React-Komponenten und versuche, die Seite von einem statischen Layout in ein reaktionsschnelleres, anpassbares Layout zu konvertieren. Ich stoße jedoch immer wieder auf Einschränkungen bei React und frage mich, ob es ein Standardmuster für die Behandlung dieser Probleme gibt. In meinem speziellen Fall habe ich eine Komponente, die als div mit display: table-cell und width: auto gerendert wird.
Leider kann ich die Breite meiner Komponente nicht abfragen, da Sie die Größe eines Elements nur berechnen können, wenn es tatsächlich im DOM platziert ist (das den vollständigen Kontext hat, mit dem die tatsächlich gerenderte Breite abgeleitet werden kann). Neben der Verwendung für Dinge wie die relative Mauspositionierung benötige ich dies auch, um die Breitenattribute für SVG-Elemente innerhalb der Komponente richtig festzulegen.
Wie kommuniziere ich bei der Größenänderung des Fensters während des Setups Größenänderungen von einer Komponente zur anderen? Wir führen alle SVG-Renderings von Drittanbietern in shouldComponentUpdate durch, aber Sie können innerhalb dieser Methode keinen Status oder keine Eigenschaften für sich selbst oder andere untergeordnete Komponenten festlegen.
Gibt es eine Standardmethode, um dieses Problem mit React zu lösen?
quelle
shouldComponentUpdate
der beste Ort ist, um SVG zu rendern? Es klingt wie das, was Sie wollencomponentWillReceiveProps
odercomponentWillUpdate
wenn nichtrender
.Antworten:
Die praktischste Lösung besteht darin, eine Bibliothek für diese Art der Reaktionsmessung zu verwenden .
Update : Es gibt jetzt einen benutzerdefinierten Hook für die Größenänderungserkennung (den ich nicht persönlich ausprobiert habe): React-Resize-Aware . Als benutzerdefinierter Haken sieht es bequemer aus als
react-measure
.Um Größenänderungen zwischen Komponenten zu kommunizieren, können Sie einen
onResize
Rückruf übergeben und die empfangenen Werte irgendwo speichern (die Standardmethode für den Freigabestatus ist heutzutage die Verwendung von Redux ):So rollen Sie Ihre eigenen, wenn Sie es wirklich vorziehen:
Erstellen Sie eine Wrapper-Komponente, die das Abrufen von Werten aus dem DOM und das Abhören von Ereignissen zur Größenänderung von Fenstern (oder zur Erkennung der Größenänderung von Komponenten, wie sie von verwendet werden
react-measure
) behandelt. Sie teilen ihm mit, welche Requisiten aus dem DOM abgerufen werden sollen, und stellen eine Renderfunktion bereit, die diese Requisiten als Kind übernimmt.Was Sie rendern, muss gemountet werden, bevor die DOM-Requisiten gelesen werden können. Wenn diese Requisiten beim ersten Rendern nicht verfügbar sind, möchten Sie sie möglicherweise verwenden,
style={{visibility: 'hidden'}}
damit der Benutzer sie nicht sehen kann, bevor er ein JS-berechnetes Layout erhält.Damit ist es sehr einfach, auf Breitenänderungen zu reagieren:
quelle
isMounted()
ResizeObserver
(oder eine Polyfüllung), um Größenaktualisierungen für Ihren Code sofort zu erhalten.Ich denke, die Lebenszyklusmethode, nach der Sie suchen, ist
componentDidMount
. Die Elemente wurden bereits im DOM platziert und Sie können Informationen über sie aus den Komponenten abrufenrefs
.Zum Beispiel:
quelle
offsetWidth
dies derzeit in Firefox nicht vorhanden ist.svg
Element sowieso explizit in der Größe anpassen müssen. AFAIK für alles, was Sie suchen, auf dessen dynamische Größe Sie sich wahrscheinlich verlassen könnenoffsetWidth
.Alternativ zu Couch und Lösung können Sie findDOMNode verwenden
quelle
ReactDOM.findDOMNode()
jetzt?react-measure
Demonstration (glaube ich) reines ES6. Es ist sicher schwierig anzufangen ... Ich habe in den letzten anderthalb Jahren den gleichen WahnsinnSie können die von mir geschriebene Bibliothek verwenden, die die gerenderte Größe Ihrer Komponenten überwacht und an Sie weiterleitet.
Beispielsweise:
Demo: https://react-sizeme-example-esbefmsitg.now.sh/
Github: https://github.com/ctrlplusb/react-sizeme
Es verwendet einen optimierten scroll- / objektbasierten Algorithmus, den ich von Leuten ausgeliehen habe, die viel schlauer sind als ich. :) :)
quelle