javascript - React 类方法覆盖

Question

我正在尝试在 React 中创建某种类组合:

class Entity {
  constructor(props) {
    super(props);
  }
  renderPartial() {
    return (<div>Entity</div>)
  }
  render() {
    return (<div>header {this.renderPartial()}</div>);
  }
}

class Person extends Entity{
  constructor(props) {
    super(props);
  }
  renderPartial() {
    return (<div>Person</div>)
  }
}

class Manager extends Person {
  constructor(props) {
    super(props);
  }

  renderPartial() {
    return (<div>Manager</div>)
  }
}

在下面的例子中Person从 Entity 延伸类(class)。这里的目标是在扩展类中呈现部分内容。所以为了简单起见，我只渲染类名。这样一来，Person 类一切正常，并呈现其文本。但是当我从 Person 扩展 Manager 时，它会写 <div>Person</div>我不明白为什么。有没有办法覆盖 renderPartial在Manager里面类(class)？

Answer 1

不要在 React 中使用继承(除了扩展 React.Component)。这不是推荐的方法。关于此的更多信息 here . (另见 here。)

如果你需要外部和内部组件，你可以使用this.props.children。例如

render() {
  return <div>header {this.props.children}</div>;
}

这允许您执行以下操作:

<Entity>
  <Person />
</Entity>

但通常这也是不必要的。只需将您的组件拆分成更小的部分。例如

<div>
  <Header />
  <Person />
</div>

与具有长继承链的庞大对象相比，小型模块化组件更易于管理。