Ich sehe, dass React.forwardRef die sanktionierte Methode zu sein scheint, einen Ref an eine untergeordnete Funktionskomponente aus den React-Dokumenten zu übergeben:
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
Was ist jedoch der Vorteil, wenn Sie dies tun, anstatt einfach eine benutzerdefinierte Requisite zu übergeben?:
const FancyButton = ({ innerRef }) => (
<button ref={innerRef} className="FancyButton">
{props.children}
</button>
));
const ref = React.createRef();
<FancyButton innerRef={ref}>Click me!</FancyButton>;
Der einzige Vorteil, den ich mir vorstellen kann, ist vielleicht eine konsistente API für Schiedsrichter, aber gibt es noch einen anderen Vorteil? Beeinflusst das Übergeben einer benutzerdefinierten Requisite das Rendern und verursacht zusätzliche Renderings, sicherlich nicht, da der Ref als veränderlicher Status im current
Feld gespeichert ist ?
Angenommen, Sie möchten mehrere Verweise übergeben (was tbh möglicherweise auf Codegeruch hinweist, aber immer noch), dann wäre die einzige Lösung, die ich sehen kann, die Verwendung von customRef-Requisiten.
Ich denke, meine Frage ist, welchen Wert es hat, forwardRef
eine benutzerdefinierte Requisite zu verwenden.
quelle
Ref
ist eine Standardeigenschaft inReact
Komponenten.Einige Komponenten, die andere Komponenten umschließen, um zusätzliche Funktionen bereitzustellen,
ref
beziehen sich auf umschlossene Komponenten und erwarten, dass die Komponente überref
Eigenschaften verfügt .Es ist besser, wenn eine Komponente die
ref
Eigenschaft hat, mit anderen Komponenten und Bibliotheken kompatibel zu sein.Funktionskomponenten können nicht die Eigenschaft "ref" haben und müssen
forwardRef
stattdessen zur Bereitstellung derref
Eigenschaft verwendet werden.quelle