React类方法覆盖

Question

我试图在反应中创造某种类作品:

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类扩展.这里的目标是在扩展类中呈现部分内容.所以为了简单起见,我只渲染类名.这样一切都可以正常使用Person类,并呈现它的文本.但是,当我从Person扩展Manager时,它会写<div>Person</div>,我无法理解为什么.有没有办法覆盖班级renderPartial内部Manager？

Answer 1

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

如果您需要外部和内部组件,则可以使用this.props.children.例如

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

这允许您执行以下操作:

<Entity>
  <Person />
</Entity>

但通常即使这是不必要的.只需将组件拆分成小块即可.例如

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

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