react：如何构造组件

我正在采取反应，并且需要关于如何构建组件树的一些建议。react：如何构造组件

我想建立与它

我有相关的过滤器泛型列表：

List组件：显示项目的列表。道具：
- 儿童：支柱（函数）用于呈现列表 (item) => <li className="list-group-item" key={item.id}> {item.name} </li>
- 列表的每个项：对象的阵列
过滤器组件：一串输入/选择用于过滤该列表
- filterList：含有数组所有字段名
- 的onChange：字段的值（状态在上述成分）
ListAndFilterContainer：当字段改变
stateValues调用函数包含的状态下的过滤器，并将其传递到列表
- 列表：传递给列表组件的项目列表
- 子项：作为子项显示项目传递给列表的功能
- filterList：传递给过滤器公司的字段列表mponent

渲染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？相同的过滤器组件？感谢

来源

2017-05-24 fonky4

的一点想法...

最好先用一个容器组件支撑的状态。这是一种适用于React的模式。
这听起来像ListComponent可能只是有不同类型的孩子，并可能不需要针对不同列表类型的特定处理。换句话说，您可能有一个CarItem组件的数组，并将其呈现为ListComponent的子组件，而不是制作单独的CarListComponent。这取决于你是否真的需要不同的逻辑来呈现不同的列表。一些视觉差异，例如更小的行高，可以用CSS来完成，所以如果你传入一个className prop并且像<ul className={this.props.className}>那样渲染它可以处理很多定制。
如果你发现你需要为不同类型的列表组件（或项目等）分开使用不同的类，我将避免使用“extends”，mixins和继承。这可能是有争议的，但IMO，Javascript本身的松散类型与继承一起工作。当事情变得有点复杂时，你会失去所发生的事情，例如“我从哪个班级获得该功能？”如果你想使用继承，请考虑打字稿。否则，我会用功能组合 - 只需从模块导入你需要的功能。

来源

2017-05-24 17:00:04

使用'props.className'听起来不错。然而，我想知道如果我不会有太多支持我的组件树的道具？至于使用构图来改变组件的渲染，唯一的方法就是通过传递更多的道具 – fonky4

为什么不愿意传递道具？它很干净，可见，是使用React的关键约定。重新组合功能：不，你不需要为这个道具传递功能。假设你有一个CarListComponent，它可以完成一些特定于汽车的事情，但也包含一些适用于所有类型列表的一般东西。对于一般的东西，从您创建并使用CarListComponent中的这些函数的单独列表实用程序模块导入函数。 –

对于组合解决方案，如果我使用List实用程序（没有实际的List组件），那么我将失去通用List-Filter关系，我想通过组件“ListAndFilterContainer”继续使用它。 – fonky4

react：如何构造组件

回答

相关问题