React中的组件继承

Question

假设我想创建一个View组件，我想我会做这样的事情：

class MyView extends View {
  render() { 
    return (
      <View ...>
        <Stuff />
      </View>
    );
  }
}

现在我可能没有意识到这里有一些非常基本的东西，但是如果MyView将被包含在包含层次结构中更高层的其他渲染中，那么仅仅在渲染中返回我的新视图的内容是不可能的？

所以我希望能够做到这一点：

class MyView extends View {
  render() {
    return (
      <Stuff />
    );
  }
}

Answer 1

这是可能的但是气馁。四人帮给我们的规则是“赞成组合”而不是继承。组成更加灵活。

The official React docs discuss this as well

Answer 2

你应该直接归还你的东西。

class MyView extends View {
    render() { return <Stuff/>; }
}

Answer 3

作为blockhead的答案，不鼓励继承。但是，与你所描述的相似的东西可以通过构图来实现。

您可以创建一个基本组件，它总是可以说是一个List组件，根据路由加载不同的组件。例如，在某些情况下，特定数据的加载总是由BaseComponent完成，只是通过道具传递给子项。

为此你还需要不同的容器，它们调用包含不同子组件的BaseComponents。

最后，容器会这样：

<BaseComponent>
   <Children1 />
   <Children2 />
</BaseComponent>

和

<BaseComponent>
   <Children10 />
   <Children12 />
</BaseComponent>