Question

我正在接受反应，并且需要一些关于如何构建组件树的建议。

我想构建一个包含与之关联的过滤器的通用List

我有：

列表组件：显示项目列表。道具：
- Children：prop（函数）用于呈现列表中的每个项目 (item) => <li className="list-group-item" key={item.id}> {item.name} </li>
- list：对象数组
过滤器组件：用于过滤列表的一堆输入/选择
- filterList：包含所有字段名称的数组
- onChange：字段更改时调用的函数
- stateValues：字段的值（上述组件中的状态）
ListAndFilterContainer：包含过滤器的状态并将其传递给列表
- list：传递给列表组件的项目列表
- children：函数作为子项传递到列表以显示项目
- 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>`

现在为了使它成为通用的我希望能够修改列表将如何呈现的标记，以及如何呈现Filter组件的输入字段。

我希望能够使用已过滤列表的逻辑，但我仍希望在演示文稿中免费。

我怎么能构建它？我想最简单的方法是继承List组件并改变渲染？例如，创建CarList扩展List？ Filter组件是否相同？感谢

Answer 1

一些想法......

使用容器组件来保持状态是个好主意。这种模式适用于React。
听起来ListComponent可能只有不同类型的子节点，并且可能不需要针对不同列表类型的特定处理。换句话说，您可能有一个CarItem组件数组并将其渲染为ListComponent的子组件，而不是创建单独的CarListComponent。这取决于你是否真的需要不同的逻辑来呈现不同的列表。一些视觉差异，例如较小的行高，可以用CSS完成，所以如果你传入一个className prop并像<ul className={this.props.className}>一样渲染它可以处理很多自定义。
如果您确实发现需要为不同类型的列表组件（或项目等）使用单独的类，我将避免使用“extends”，mixins和继承。这可能是有争议的，但IMO，Javascript本身的类型太宽松，无法继承。当事情变得有点复杂时，你会忘记发生的事情。 “我从哪个课程中获得了这个功能？”如果要使用继承，请考虑使用typescript。否则，我将使用功能组合 - 只需从模块中导入所需的功能。

反应：如何构建组件

1 个答案: