Gibt es eine Möglichkeit, den Namen der übergeordneten Komponenten/displayName in einer untergeordneten Komponente abzurufen?

Question

Lange Rede, kurzer Sinn, ich suche nach einer Fehlerbehandlung, die aussagekräftiger ist (wie PropType-Validierungsfehler) und ich frage mich, ob es eine Möglichkeit gibt, den Namen der Elternkomponente zu erhalten.

Zum Beispiel können die PropType Validierungsfehler wie so lesen:

Warning: Failed propType: Invalid prop 'label' of type 'number' supplied to 'MyChild', expected 'string'. Check the render method of 'MyParent'.

Ich würde meine eigenen Fehler wie die Eltern darin haben, wie etwas zu lesen:

Error: Instantiation of abstract class 'AbstractMyClass' is not allowed. Check the render method of 'MyParent'.

Ist das möglich ? Wenn es einen Unterschied macht, sind diese in ES6-Syntax geschrieben.

Vielen Dank im Voraus! -Ted

Answer 1

Sie können den Namen von function A() {} mit A.name erhalten, wenn function B() {} erbt von A dann Object.getPrototypeOf(B.prototype) === A.prototype, Prototypen einen Link an den Konstruktor durch die constructor Eigenschaft dh A.protoype.constructor === A

import React, {Component} from 'react' 

class AbstractClass extends Component { 
    constructor() { 
    super() 
    if (this.constructor === AbstractClass) { 
     throw Error('Instantiation of abstract class AbstractMyClass is not allowed') 
    } 
    } 

    getSuperName() { 
    var proto = Object.getPrototypeOf(this) // or this.constructor.prototype 
    return Object.getPrototypeOf(proto).constructor.name 
    } 
} 

class A extends AbstractClass {} 
class B extends A {} 

console.log(new A())     // works 
console.log(new A().getSuperName()) // AbstractMyClass 
console.log(new B().getSuperName()) // A 

console.log(new AbstractClass()) // throws error 

Testen Sie es online haben sollte http://esnextb.in/?gist=ff5fc627922285b3d085bd9c42420736