首頁>編程相關>三方組件
下載

React收集幫助者

一套合併的公用事業組件來操縱收藏。

快速示例

 import { Filter , Sort , First } from 'react-collection-helpers' ;

const users = [
  { id : 'a' , name : 'Harry' , lastMessagedAt : '2016-03-14T15:00' , isOnline : true } ,
  { id : 'b' , name : 'Bob' , lastMessagedAt : '2017-01-20T12:00' , isOnline : false } ,
  { id : 'c' , name : 'Molly' , lastMessagedAt : '2013-01-02T03:04' , isOnline : false } ,
  { id : 'd' , name : 'Karrin' , lastMessagedAt : '2017-01-12T11:05' , isOnline : true } ,
  { id : 'e' , name : 'Thomas' , lastMessagedAt : '2014-03-04T13:37' , isOnline : true } ,
]

const UserList = ( { users } ) => (
  < Filter collection = { users } predicate = { { isOnline : true } } >
    < Sort comparator = "lastMessagedAt" >
      < First num = { 4 } >
        { user => < div key = { user . id } > { user . name } </ div > }
      </ First >
    </ Sort >
  </ Filter >
)

ReactDOM . render (
  < UserList users = { users } > ,
  document.querySelector('#root')
)

/*
  Renders:

  < div >
    < div > Karrin </ div >
    < div > Harry </ div >
    < div > Thomas </ div >
  </ div >
*/

現場演示

玩現場演示。

目錄

  • 特徵
  • 缺點
  • 安裝
  • 反饋想要
  • 用法
  • 嚮導
    • 理解和自定義標記
    • React收集幫助者中的謂詞
    • React收集幫助者中的比較器
  • API參考
    • <Every>
    • <Filter>
    • <Find>
    • <First>
    • <Last>
    • <Map>
    • <Reject>
    • <Reverse>
    • <Some>
    • <Sort>

特徵

  • 有用- 包括10個以上的組件，可幫助您過濾，排序和切片集合。
  • ✒️設計師友好- 通過編寫組件而沒有復雜的內聯邏輯來使您的設計師的生活更輕鬆。
  • ⚡小型- 完整的構建僅為2.5kb，並且是模塊化的，因此您只能導入所需的組件。
  • ？表演劑- 實驗表明，這些組件與天然方法一樣的性能。
  • ？可自定義- 包裝器元素可以是您想要的任何元素類型（本機或複合），並且所有非識別道具均通過。編寫收集助手不會創建其他HTML標記！

缺點

因此，React收集助手是一個實驗，旨在測試React的組件模型在用於陣列操作時是否有意義。

我認為，由於上述原因，它比在組件的渲染方法中進行香草JS操縱更好。也就是說，這通常是做這種邏輯的錯誤的地方。

對於非常大的收藏，或者對於經常重新渲染的組件，將這種強烈的操作移動到記憶的功能中是有意義的。如果您使用redux，那麼重新選擇可能是做這類工作的更好的地方。

這也意味著您的演示層永遠不必關心這項工作，這通常是一件好事。

對於小應用程序（或大型應用程序中的簡單部分），React React收集助手可能是一個不錯的選擇。但是，對於Redux應用程序，通常會有更好的方法。

最終，React Collect Collect Herser是起點，而不是最終目的地。我覺得有足夠的反複試驗，我們可能會偶然發現一些真正創新和有用的東西。我將繼續進行試驗，我鼓勵我們所有人保持開放的態度，並註意令人興奮的新可能性。

安裝

 npm i -S react-collection-helpers

也可以通過CDN獲得UMD構建：

  • React-Collection-Helpers.js
  • React-Collection-Helpers.min.js

（如果使用UMD構建，則全局變量為CollectionHelpers ）

反饋想要

該項目是一個實驗，用於測試收集操縱器在組件外形中的有用性。

當我說這是一個實驗時，我並不一定意味著它是實驗性的。我非常有信心它可以穩定且安全地用於生產；代碼很簡單。

相反，我的意思是我不相信它解決了一個真正的問題。我想听聽實施它們的用戶的消息；它會改善您或您的團隊的發展經驗嗎？您認為如果朝著一定方向發展，這個想法有潛力嗎？我願意探索切線的想法。

讓我在Twitter上或通過電子郵件知道

用法

導入您需要的組件： 

 // ES6 modules
import { Find , Every , Map } from 'react-collection-helpers' ;

// CommonJS
const { Find , Every , Map } = require ( 'react-collection-helpers' ) ;

另外，您可以單獨導入組件，以避免捆綁不使用的組件： 

 // This method avoids bundling unused components, and reduces gzipped bundles
// by about 1kb.
import Find from 'react-collection-helpers/lib/components/Find' ;
import Every from 'react-collection-helpers/lib/components/Every' ;
import Map from 'react-collection-helpers/lib/components/Map' ;

嚮導

了解有關如何最好地使用這些深入指南的React React收集幫助者的更多信息：

  • 理解和自定義標記
  • React收集幫助者中的謂詞
  • React收集幫助者中的比較器

API參考

<Every>

如果每個孩子的謂詞返回，則渲染孩子。如果謂詞為任何孩子返回false，則可以提供一個後備節點。否則，什麼都不會呈現。

如果沒有提供謂詞，只要該集合有1個或更多，內容就會呈現。如果提供了空的集合，則將渲染後備內容。

道具

支柱必需的類型筆記
collection ✓ [ any ]父母收集幫助者可以隱式地通過
predicate ✕ function / object有關更多信息，請參見謂詞
fallback ✕ node如果謂詞在任何項目上返回false，則將渲染的替代內容。

例子

 const collection = [
  { id : 'a' , src : '...' , isLoaded : true } ,
  { id : 'b' , src : '...' , isLoaded : true } ,
  { id : 'c' , src : '...' , isLoaded : false } ,
] ;

< Every
  collection = { collection }
  predicate = { { isLoaded : true } }
  fallback = { < span > Loading... </ span > }
>
  { item => < img key = { item . id } src = { item . src } /> }
</ Every >

<Filter>

只渲染謂詞返回true孩子。

道具

支柱必需的類型筆記
collection ✓ [ any ]父母收集幫助者可以隱式地通過
predicate ✓ function / object有關更多信息，請參見謂詞

例子

 const collection = [
  { id : 'a' , name : 'apple' , price : 1.00 } ,
  { id : 'b' , name : 'banana' , price : 5.00 } ,
  { id : 'c' , name : 'carrot' , price : 2.50 } ,
] ;

< Filter collection = { collection } predicate = { item => ( item . price < 3 ) } >
  { item => < div key = { item . id } > { item . name } </ div > }
</ Filter >

<Find>

渲染謂詞返回true第一個孩子。

道具

支柱必需的類型筆記
collection ✓ [ any ]父母收集幫助者可以隱式地通過
predicate ✓ function / object有關更多信息，請參見謂詞

例子

 const collection = [
  { id : 'a' , name : 'John' , isAdmin : false } ,
  { id : 'b' , name : 'Jane' , isAdmin : true } ,
  { id : 'c' , name : 'Jala' , isAdmin : false } ,
] ;

< Find collection = { collection } predicate = { { isAdmin : true } } >
  { user => < div key = { user . id } > Your group's admin is { user . name } </ div > }
</ Find >

<First>

返回集合的前1個或更多項目。通常，小時候對另一個收藏輔助人員有用。

道具

支柱必需的類型筆記
collection ✓ [ any ]父母收集幫助者可以隱式地通過
num ✕ number默認為1

例子

 const collection = [
  { id : 'a' , name : 'John' , distance : 3.14 } ,
  { id : 'b' , name : 'Jane' , distance : 0.45 } ,
  { id : 'c' , name : 'Jala' , distance : 1.23 } ,
] ;

< Sort collection = { collection } comparator = "distance" >
  < First >
    { user => < div key = { user . id } > You are closest to { user . name } </ div > }
  </ First >
</ Sort >

<Last>

返回集合的最後一個或更多項目。 <First>的對面。通常，小時候對另一個收藏輔助人員有用。

道具

支柱必需的類型筆記
collection ✓ [ any ]父母收集幫助者可以隱式地通過
num ✕ number默認為1

例子

 const collection = [
  { id : 'a' , name : 'John' , distance : 3.14 } ,
  { id : 'b' , name : 'Jane' , distance : 0.45 } ,
  { id : 'c' , name : 'Jala' , distance : 1.23 } ,
] ;

< Sort collection = { collection } comparator = "distance" >
  < Last >
    { user => < div key = { user . id } > You are furthest from { user . name } </ div > }
  </ Last >
</ Sort >

<Map>

最簡單的收集助手，做得不多。對於確保組件之間的一致性很有用。

道具

支柱必需的類型筆記
collection ✓ [ any ]父母收集幫助者可以隱式地通過

例子

 const collection = [
  { id : 'a' , name : 'John' } ,
  { id : 'b' , name : 'Jane' } ,
  { id : 'c' , name : 'Jala' } ,
] ;

< Map collection = { collection } >
  { user => < div key = { user . id } > { user . name } </ div > }
</ Map >

<Reject>

僅渲染謂詞返回false孩子。 <Filter>的對面。

道具

支柱必需的類型筆記
collection ✓ [ any ]父母收集幫助者可以隱式地通過
predicate ✓ function / object有關更多信息，請參見謂詞

例子

 const collection = [
  { id : 'a' , name : 'apple' , price : 1.00 } ,
  { id : 'b' , name : 'banana' , price : 5.00 } ,
  { id : 'c' , name : 'carrot' , price : 2.50 } ,
] ;

< Reject collection = { collection } predicate = { item => ( item . price > 3 ) } >
  { item => < div key = { item . id } > { item . name } </ div > }
</ Reject >

<Some>

如果任何孩子都歸還謂詞，則渲染孩子。如果謂詞為所有兒童返回誤報，則可以提供一個後備節點。否則，什麼都不會呈現。

如果沒有提供謂詞，只要該集合有1個或更多，內容就會呈現。如果提供了空的集合，則將渲染後備內容。

道具

支柱必需的類型筆記
collection ✓ [ any ]父母收集幫助者可以隱式地通過
predicate ✕ function / object有關更多信息，請參見謂詞
fallback ✕ node如果謂詞在所有項目上返回false，則將渲染的替代內容。

例子

 const collection = [
  { id : 'a' , username : 'sickskillz' , hasWon : false } ,
  { id : 'b' , username : 'dabomb12345' , hasWon : false } ,
] ;

< Some
  elementType = { Leaderboard }
  collection = { collection }
  predicate = { { hasWon : true } }
>
  { user => < LeaderboardRow key = { user . id } { ... user } /> }
</ Some >

<Sort>

根據比較器對孩子進行分類。

道具

支柱必需的類型筆記
collection ✓ [ any ]父母收集幫助者可以隱式地通過
comparator ✓ function / object有關更多信息，請參見比較器
descending ✕ boolean是否在提供“字符串”比較器時以降序排序。默認為false （字符串比較器在上升中排序）。

例子

 const collection = [
{ id : 'a' , name : 'apple' , price : 1.00 } ,
{ id : 'b' , name : 'banana' , price : 5.00 } ,
{ id : 'c' , name : 'carrot' , price : 2.50 } ,
] ;

< Sort collection = { collection } comparator = "price" >
  { item => < StoreItem key = { item . id } { ... item } /> }
</ Sort >
展開
附加信息
相關應用
爲您推薦
相關資訊 全部