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：如何構造組件

回答

相關問題