反应中的组件继承

Question

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

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

现在我可能不知道这里一些非常基本的事情，但是考虑到 MyView 将包含在包含层次结构中更高的其他渲染中，是否不可能只在渲染中返回我的新视图的内容？

所以我希望能够这样做：

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

Answer 1

你应该直接退回你的东西。

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

Answer 2

这是可能的，但很气馁。四人帮给我们的规则是"偏爱组合"而不是继承。构图更加灵活。

官方 React 文档也讨论了这个问题

Answer 3

正如笨蛋的回答所说，不鼓励继承。但是，与您描述的类似的东西可以通过构图来实现。

您可以创建一个基本组件，例如，该组件始终是一个列表组件，根据路由加载不同的组件。例如，特定数据的加载可以始终由 BaseComponent 完成，并且只需通过道具传递给子级。

为此，您还需要不同的容器，这些容器调用包含不同子组件的 BaseComponents。

最后，容器将如下所示：

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

和：

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