Ich versuche, React.forwardRef zu verwenden, stolpere aber darüber, wie es in einer klassenbasierten Komponente (nicht HOC) funktioniert.
In den Dokumentbeispielen werden Elemente und Funktionskomponenten verwendet, und es werden sogar Klassen in Funktionen für Komponenten höherer Ordnung eingeschlossen.
Also, beginnend mit so etwas wie dies in ihrer ref.js
Datei:
const TextInput = React.forwardRef(
(props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />)
);
und stattdessen so etwas definieren:
class TextInput extends React.Component {
render() {
let { props, ref } = React.forwardRef((props, ref) => ({ props, ref }));
return <input type="text" placeholder="Hello World" ref={ref} />;
}
}
oder
class TextInput extends React.Component {
render() {
return (
React.forwardRef((props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />))
);
}
}
funktioniert nur: /
Ich weiß auch, dass Refs nicht die richtige Reaktion sind. Ich versuche, eine Canvas-Bibliothek eines Drittanbieters zu verwenden, und möchte einige ihrer Tools in separaten Komponenten hinzufügen. Daher benötige ich Ereignis-Listener und daher Lebenszyklusmethoden. Es kann später einen anderen Weg gehen, aber ich möchte dies versuchen.
Die Dokumente sagen, dass es möglich ist!
Die Weiterleitung von Refs ist nicht auf DOM-Komponenten beschränkt. Sie können Refs auch an Klassenkomponenteninstanzen weiterleiten.
aus dem Hinweis in diesem Abschnitt.
Aber dann verwenden sie HOCs anstatt nur Klassen.
quelle
connect
oder Marterial-UI eingewickelt habenwithStyles
?connect
oderwithStyles
? Sie sollten alle HOCs mitforwardRef
"sicherer" Requisite umwickeln und diese intern verwenden, um einen Ref an die niedrigste Komponente in der Kette weiterzuleiten.Sie müssen einen anderen Requisitennamen verwenden, um den Ref an eine Klasse weiterzuleiten.
innerRef
wird häufig in vielen Bibliotheken verwendet.quelle
beautifulInputElement
ist eher eine Funktion als ein Reaktionselement, es sollte so seinconst beautifulInputElement = <BeautifulInputForwardingRef ref={ref => ref && ref.focus()} />
Grundsätzlich ist dies nur eine HOC-Funktion. Wenn Sie es mit Klasse verwenden möchten, können Sie dies selbst tun und normale Requisiten verwenden.
Dieses Muster wird zum Beispiel in verwendet
styled-components
und dort aufgerufeninnerRef
.quelle
innerRef
fehlt der Punkt völlig. Das Ziel ist vollständige Transparenz: Ich sollte in der Lage sein, ein<FancyButton>
Element so zu behandeln, als wäre es ein reguläres DOM-Element. Bei Verwendung des Styled-Components-Ansatzes muss ich jedoch berücksichtigen, dass diese Komponente anstelle von nur eine beliebig benannte Requisite für Refs verwendetref
.innerRef
Weitergabe des Verweises an das untergeordnete Kind zu streichenReact.forwardRef
, was das OP zu erreichen versucht.Dies kann mit einer Komponente höherer Ordnung erreicht werden, wenn Sie möchten:
Und dann in Ihrer Komponentendatei:
Ich habe die Arbeit im Voraus mit Tests gemacht und ein Paket dafür veröffentlicht
react-with-forwarded-ref
: https://www.npmjs.com/package/react-with-forwarded-refquelle
Wenn Sie dies in vielen verschiedenen Komponenten wiederverwenden müssen, können Sie diese Fähigkeit in etwas wie exportieren
withForwardingRef
Verwendung:
quelle