Reactjs react：如何构造组件

我正在学习react，需要一些关于如何构建组件树的建议

我想建立一个带有相关过滤器的通用列表

我有：

• 列表组件：显示项目的列表。道具：
  • 子项：用于呈现列表中每个项的属性（函数）

    （项目）=>
    
    {item.name}
    

  • 列表：对象数组
• 筛选组件：用于筛选列表的一组输入/选择
  • filterList：包含所有字段名的数组
  • onChange：字段更改时调用的函数
  • stateValues：字段的值（上述组件中的状态）
• ListAndFilterContainer：包含筛选器的状态并将其传递给列表
  • 列表：传递给列表组件的项目列表
  • 子项：作为子项传递到列表以显示项的函数
  • filterList：传递给筛选器组件的字段列表

ListAndFilterContainer的呈现：

`<div>
    <FilterOnList 
      filterList={this.props.filterList} 
      filterState={this.state.filter} 
      onChange={this.handleFilterChange} />
    <ListComponent 
        list={this.props.list} 
        title={this.props.title}
    >
        {this.props.children}
    </ListComponent>
</div>`

`
{this.props.children}
`

现在，为了使其通用化，我希望能够修改列表如何呈现的标记，以及过滤器组件的输入字段如何呈现的标记

我希望能够使用过滤列表的逻辑，但我仍然希望在演示文稿上自由发挥

我如何构建它？我想最简单的方法是继承列表组件并更改渲染？例如，创建CarList扩展列表？ 过滤器组件也一样吗？ 谢谢

想一想

• 使用容器组件保存状态是个好主意。这是一种适合React的模式
• 听起来ListComponent可能只是有不同类型的子项，可能不需要对不同的列表类型进行特定的处理。换句话说，您可能拥有一个CarItem组件数组，并将其呈现为ListComponent的子级，而不是制作一个单独的CarListComponent。这取决于您是否真的需要不同的逻辑来呈现不同的列表。一些视觉上的差异，例如较小的行高，可以通过CSS来实现，因此如果您传入一个className prop并将其呈现为
  ，可以处理大量定制
• 如果您发现不同类型的列表组件（或项目等）需要单独的类，我通常会避免使用“扩展”、混合和继承。这可能会引起争议，但在我看来，Javascript本身的类型过于松散，无法处理继承。当事情变得有点复杂时，你会忘记发生了什么事情，比如“我从哪一个班级得到了这个功能？”如果你想继承，就考虑打字。否则，我将使用函数组合-只需从模块导入所需的函数

---

使用“props.className”听起来不错。然而，我想知道我是否会有太多的道具来传递我的组件树？至于使用合成来改变组件的渲染，唯一的方法是传递更多的道具为什么不愿意传递道具？它干净、可见，是使用React的一个关键惯例。关于函数合成：不，你不需要把函数作为道具来传递。假设你有一个CarListComponent，它可以做一些特定于汽车的东西，但也可以做一些所有类型的列表都通用的东西。对于常规内容，请从您在CarListComponent中创建并使用这些函数的单独列表实用程序模块导入函数。对于组合解决方案，如果我选择列表实用程序（没有实际的列表组件），则我将丢失希望通过组件“ListAndFilterContainer”继续使用的通用列表筛选器关系.我同意，如果不同类型的列表之间的逻辑没有太大变化，最好使用单个通用组件，例如ListAndFilterContainer。但是，如果您确实发现有无法在列表子项中或通过CSS自定义处理的逻辑自定义，请咬紧牙关，创建单独的类，例如CarList、AirplaneList等。不要犯创建由不同道具自定义的复杂“万事俱备”组件的错误。