反应：如何构造组件

Question

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

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

我有：

>

列表组件：显示项目的列表。道具：

• 子：prop（一个函数），用于呈现列表的每个项目（项目）=

筛选组件：用于筛选列表的一组输入/选择

• filterList:包含所有字段名的数组
• onChange：字段更改时调用的函数
• stateValues：字段的值（上述组件中的状态）

ListAndFilterContainer：包含筛选器的状态并将其传递给列表

• list：传递给list组件的项目列表
• 子元素：函数作为子元素传递给列表，以显示项目
• 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>`

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

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

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




Answer 1

一些想法...

• 使用容器组件保存状态是个好主意。这是一种适合React的模式。
• 听起来ListComponent可能只是有不同类型的子项，可能不需要对不同的列表类型进行特定的处理。换句话说，您可能拥有一个CarItem组件数组，并将其呈现为ListComponent的子级，而不是制作一个单独的CarListComponent。这取决于您是否真的需要不同的逻辑来呈现不同的列表。一些视觉上的差异，例如较小的行高，可以通过CSS来实现，因此如果您传入一个className道具并将其呈现为