Question

长话短说，我正在寻找一些更具描述性的错误处理（比如propType验证错误），并且想知道是否有办法让父组件的名称做嘘声。

例如，propType验证错误如下所示：

警告：propType失败：'number'类型的prop'label'无效提供给'MyChild'，预期'字符串'。检查渲染方法 'MyParent'。

我喜欢自己的错误，让父母参与其中，阅读如下内容：

错误：不允许实例化抽象类'AbstractMyClass'。检查'MyParent'的渲染方法。

这可能吗？如果它有所不同，则使用ES6语法编写。

提前致谢！ -Ted

Answer 1

您可以使用function A() {}获取A.name的名称，如果function B() {}继承自A，那么Object.getPrototypeOf(B.prototype) === A.prototype，原型应该有一个指向构造函数的链接constructor属性，即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

在http://esnextb.in/?gist=ff5fc627922285b3d085bd9c42420736

在线测试

有没有办法从子组件中获取父组件名称/ displayName？

1 个答案: