react super，无法读取未定义的属性'call'

Question

我尝试在子一个中使用并覆盖父方法，但得到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类方法语法：

class BreadcrumbsHome extends React.Component {
  getBreadcrumbs () {
    return [{ 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 () {
    return [
      ...super.getBreadcrumbs(),
      ...this.props.path
    ];
  }

  ...
}

问题是，字段初始化器在每个类实例上创建自己的属性，而不是像类方法那样绑定到原型链，因此，您所做的所有工作都是用扩展类的自身属性覆盖基类的自身属性getBreadcrumbs。] >