2015-04-01 17 views
5

Ich möchte für einige meine Komponenten nette Fehlermeldungen liefern, wie reagiert, zum Beispiel:Wie erhält man den Namen der Elternkomponente in React?

WARNUNG: Jedes Kind in einem Array eine einzigartige „Schlüssel“ prop haben sollte. Überprüfen Sie die Rendermethode von MyComponent. Weitere Informationen finden Sie unter fb.me/react-warning-keys.

Diese Nachricht enthält einige Informationen zum Kontext des Fehlers. Ich weiß, dass ich es im Debugger finden kann, aber ich möchte das Debugging für mich und meine Programmkollegen einfacher machen.

+0

Gibt es einen Grund, warum Sie das brauchen würden? Reagierende Komponenten wirken auf die Eigenschaften, die sie erhalten, und auf ihren internen Zustand und nicht auf die Hierarchie, der sie angehören. Nicht sicher, ob das Drucken der Elternkomponente beim Debugging helfen würde, – Cristik

+0

Ich habe eine Komponente für die Verarbeitung von Promises erstellt. Ich mag es, aber ich benutze es ziemlich oft überall, also möchte ich seine Fehlerbehandlung verbessern. – mik01aj

+0

Ich gehe davon aus, dass die Versprechungshandler von der übergeordneten Komponente gesendet werden, wenn dies der Fall ist, da die meisten Probleme in den Handlern auftreten, und diese auf der übergeordneten Ebene sind, wissen Sie, wo Sie sind. – Cristik

Antwort

1

Es ist zwar nicht klar ist, wie Sie dies mit einem Promise Komponente verwenden, würden Sie in einem Kommentar erwähnt, könnten Sie dies versuchen:

var componentName = this.constructor.displayName || this.constructor.name || undefined; 

Es wird von this Funktion im ReactJS Code inspiriert ist, die an den Konstruktor sieht um einen Namen während der React-Element-Validierung zu erstellen.

Wenn Sie jedoch den Namen eines Elternteils wünschen, ist dies auf dokumentierte Weise nicht möglich und wäre wahrscheinlich fragil, wenn Sie Code in Abhängigkeit von einer bestimmten internen Implementierung erstellen würden. Es ist ein einseitiger Informationsfluss, so dass das Kind keine Verbindung zu seinem Elternteil über die normale Architektur benötigt.

Wenn Sie den übergeordneten Namen benötigen, müssen Sie den Wert erhalten und über Kinder weitergeben, was sicherlich nicht wünschenswert ist.

+1

'this.constructor.displayName' druckt diesen Komponentennamen (das ist nett, aber nicht das, was ich wollte, wie ich das Elternteil wollte), und' constructor.name' ist immer 'Window' für mich (höchstwahrscheinlich du meintest' this.constructor.name' da). – mik01aj

+0

Gotcha. Ich habe nicht verstanden, wie Sie den Wert des Elternteils so haben wollten, wie er in Ihrer Frage nicht beschrieben wurde (das Beispiel zeigte, was ich zur Verfügung gestellt hatte). Ich habe meine Antwort aktualisiert, um zu sagen, dass es mit keinen unterstützten Mitteln möglich ist. – WiredPrairie

Verwandte Themen