2017-06-21 3 views
1

Ich schreibe eine React-Komponente, die eine renderer Eigenschaft übernimmt. Im Allgemeinen ist dies eine Funktion, die ein Objekt von Argumenten aufnimmt und eine andere React-Komponente zurückgibt. Ich möchte jedoch, dass Benutzer meiner Komponente stattdessen eine React-Komponentenklasse übergeben können. Ich würde dann intern diese Klasse in eine Funktion umwandeln:Wie kann ich feststellen, ob eine Funktion eine Klasse ist?

Natürlich ist eine Klasse in JavaScript auch eine Funktion. Wie kann ich überprüfen, ob renderer eine Klasse ist? Ich benutze Babel 6.

Ich bin mir bewusst, dass ich einfach <renderer {...someArgs} /> zurückgeben könnte. Ich würde das lieber nicht tun, wenn ich es vermeiden könnte, weil das unnötig den Komponentenbaum aufbläht.

+0

Was ist, wenn jemand eine Babel-kompilierte Version einer Klasse verwendet? Dann egal, was sie beide gerade "Funktion" an diesem Punkt sind. Sie würden besser zwei separate Parameter akzeptieren. – loganfsmyth

+0

In jedem Fall sind sie Funktionen (d. H. "Typ der Sache ===" Funktion ""). Dies bedeutet jedoch nicht unbedingt, dass es keine Möglichkeit gibt, sie zu unterscheiden. Wenn es nachweislich keinen Weg gibt, dann wäre das eine Antwort. –

+0

Nun, wenn die 'fn' eine Komponentenklasse war, dann sollte der 'fn.prototype' Basisklassen-Komponentenmethoden enthalten, so dass Sie die Existenz dieser Komponenten testen können. Wenn es sich nur um eine Factory-Funktion handelt, enthält der 'fn.prototype' nicht die Komponentenmethoden. – jfriend00

Antwort

1

Es ist möglich, native Klassen mit regulärem Ausdruck zu erkennen - sofern sie nicht die Methode implementieren, die ihre Darstellung als String ändert.

Es ist nicht möglich zu erkennen, ob eine Funktion eine Klasse ist, da sich Klassen nicht von Funktionen im transpilierten Code unterscheiden. Dies ist ein guter Grund, nicht einmal zu versuchen, sie programmatisch zu unterscheiden.

Es ist möglich, zu überprüfen, ob React.Component der Vorfahr einer Funktion/Klasse ist mit

renderer.prototype instanceof React.Component 

Da diese unnötige Einschränkung stellt eine bessere Option ist, sich zu ducken Test es, wie

renderer.prototype && ['render', 'setState', ...] 
    .map(methodName => typeof renderer.prototype[methodName]) 
    .every(methodType => methodType === 'function') 

Keine dieser Überprüfungen ist jedoch korrekt. prototype Eigenschaft kann in einigen Fällen, z. wenn eine Klasse dekoriert ist. Die einzige Möglichkeit, sicher zu wissen, dass eine Klasse eine Komponente ist, besteht darin, sie zuerst zu instanziieren.

Und API wäre sauberer, wenn Renderer Funktion und Komponente nie verwechselt werden könnte, zum Beispiel separate renderer und rendererComponent Eigenschaften.

Verwandte Themen