超级反应，无法读取未定义的属性“调用”

Question

我尝试在子对象1中使用和覆盖父方法，但得到Uncaught TypeError: Cannot read property 'call' of undefined

class BreadcrumbsHome extends React.Component {
  getBreadcrumbs = () => [{name: 'home', url: '/'}];

  render() {
    return <nav>
      <ol className="breadcrumb float-sm-right">
        {!!this.getBreadcrumbs && this.getBreadcrumbs().map((e, i, arr) =>
          <li className={`breadcrumb-item ${i === arr.length - 1 ? 'active' : ''}`}><a
            href={APP_CONTEXT + e.url}>{e.name}</a>/</li>
        )}
      </ol>
    </nav>
  }
}

class BreadcrumbsTypes extends BreadcrumbsHome {

  getBreadcrumbs = () => [
    ...super.getBreadcrumbs(),
    ...this.props.path
  ]

当我读到这个问题时。似乎与通天塔绑在一起，所以我尝试添加//noprotect行

我想使用ES6并避免这种方式 ParentClass.prototype.myMethod.call(this, arg1, arg2, ..)

有什么解决办法吗？

Answer 1

如果要保持JavaScript原型继承中期望的典型虚拟多态性，则不能使用字段初始化程序语法，而必须使用ES2015类方法语法：

getBreadcrumbs

问题在于，字段初始化器在每个类实例上创建自己的属性，而不是像类方法那样绑定到原型链，因此您要做的就是用基类覆盖由基类初始化的自己的属性key扩展类初始化的自有属性。

您可以使用调试器控制台进行确认：

与

P.S。不要忘记在映射的JSX组件上包括唯一的.breadcrumb-item:last-child属性：)

我还建议使用CSS设置.breadcrumb-item.active而不是map()的样式，因此您的className回调可以将className="breadcrumb-item" 简化为

.breadcrumb-item::after { 
  content: "/";
}

您还可以将以下类添加到CSS

/

因此您可以在JSX中省略{{1}}。