react collection helpers
v1.2.2
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 >
*/Spielen Sie mit einer Live -Demo.
<Every><Filter><Find><First><Last><Map><Reject><Reverse><Some><Sort> React Collection Helpers ist also ein Experiment, das getestet wurde, ob das Komponentenmodell von React bei der Verwendung für die Array -Manipulation sinnvoll ist.
Ich glaube, dass es aus den oben beschriebenen Gründen schöner ist, als Vanille -JS -Manipulation innerhalb der Rendermethode Ihrer Komponente zu machen. Das heißt, dies ist oft der falsche Ort, um diese Art von Logik zu machen .
Für sehr große Sammlungen oder für Komponenten, die häufig wieder rendern, ist es sinnvoll, diese Art von intensiver Manipulation in meierisierte Funktionen zu bewegen. Wenn Sie Redux verwenden, ist es wahrscheinlich ein besserer Ort, um diese Art von Arbeit zu erledigen.
Es bedeutet auch, dass sich Ihre Präsentationsschicht niemals mit dieser Arbeit befassen muss, was normalerweise eine gute Sache ist.
Für kleine Apps (oder einfache Abschnitte in großen Apps) können React -Sammelhelper eine nette Geste sein. Für Redux -Apps gibt es jedoch oft einen besseren Weg.
Letztendlich wird React Collection -Helpers als Ausgangspunkt gebaut, nicht als endgültiges Ziel. Ich fühle mich wie mit genügend Versuch und Irrtum, wir könnten auf etwas wirklich innovatives und Nützliches stolpern. Ich werde weiter experimentieren, und ich würde uns alle ermutigen, offen zu bleiben, und ein Auge auf aufregende neue Möglichkeiten.
npm i -S react-collection-helpers
UMD -Builds sind auch über CDN erhältlich:
(Wenn Sie den UMD -Build verwenden, ist die globale Variable CollectionHelpers ))
Dieses Projekt ist ein Experiment zum Testen der Nützlichkeit von Sammelmanipulatoren im Komponentenformfaktor.
Wenn ich sage, dass es ein Experiment ist, meine ich nicht unbedingt, dass es experimentell ist. Ich bin ziemlich zuversichtlich, dass es stabil und sicher in der Produktion verwendet wird. Der Code ist recht einfach.
Ich meine vielmehr, dass ich nicht davon überzeugt bin, dass es ein echtes Problem löst. Ich würde gerne von Benutzern hören, die sie implementieren. Verbessert es die Entwicklungserfahrung von Ihnen oder Ihrem Team? Denken Sie, dass die Idee Potenzial hat, wenn sie in eine bestimmte Richtung ging? Ich bin offen für die Erforschung von Tangentialideen.
Lassen Sie mich auf Twitter oder per E -Mail wissen
Importieren Sie die von Ihnen benötigten Komponenten:
// ES6 modules
import { Find , Every , Map } from 'react-collection-helpers' ;
// CommonJS
const { Find , Every , Map } = require ( 'react-collection-helpers' ) ;Alternativ können Sie Komponenten einzeln importieren, um zu vermeiden, dass die von Ihnen nicht verwendeten Komponenten gebündelt werden:
// 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' ; Erfahren Sie mehr darüber, wie die React-Sammlungshelfer mit diesen eingehenden Leitfäden am besten verwendet werden:
<Every>Rendern Sie die Kinder, wenn das Prädikat für jedes Kind zutrifft. Ein Fallback -Knoten kann zur Verfügung gestellt werden, um zu rendern, wenn das Prädikat für jedes Kind false zurückgibt. Ansonsten wird nichts gerendert.
Wenn kein Prädikat bereitgestellt wird, wird der Inhalt so, solange die Sammlung 1 Artikel oder mehr enthält. Wenn eine leere Sammlung geliefert wird, wird der Fallback -Inhalt gerendert.
| Stütze | Erforderlich | Typen | Notizen |
|---|---|---|---|
collection | ✓ | [ any ] | Kann implizit von Helpern der Elternsammlung übergeben werden |
predicate | ✕ | function / object | Weitere Informationen finden Sie in Prädikaten |
fallback | ✕ | node | Alternative Inhalte zu rendern, wenn das Prädikat bei Elementen false zurückgibt. |
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> Rendern nur die Kinder, für die das Prädikat true .
| Stütze | Erforderlich | Typen | Notizen |
|---|---|---|---|
collection | ✓ | [ any ] | Kann implizit von Helpern der Elternsammlung übergeben werden |
predicate | ✓ | function / object | Weitere Informationen finden Sie in Prädikaten |
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> Rendern Sie das erste Kind, für das das Prädikat true zurückgibt.
| Stütze | Erforderlich | Typen | Notizen |
|---|---|---|---|
collection | ✓ | [ any ] | Kann implizit von Helpern der Elternsammlung übergeben werden |
predicate | ✓ | function / object | Weitere Informationen finden Sie in Prädikaten |
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>Gibt die ersten 1 oder mehr Elemente der Sammlung zurück. Im Allgemeinen nur als Kind zu einem anderen Sammelhelfer nützlich.
| Stütze | Erforderlich | Typen | Notizen |
|---|---|---|---|
collection | ✓ | [ any ] | Kann implizit von Helpern der Elternsammlung übergeben werden |
num | ✕ | number | Standardmäßig 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> Gibt die letzten 1 oder mehr Elemente der Sammlung zurück. Das Gegenteil von <First> . Im Allgemeinen nur als Kind zu einem anderen Sammelhelfer nützlich.
| Stütze | Erforderlich | Typen | Notizen |
|---|---|---|---|
collection | ✓ | [ any ] | Kann implizit von Helpern der Elternsammlung übergeben werden |
num | ✕ | number | Standardmäßig 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>Der einfachste Sammelhelfer, tut nicht viel. Kann nützlich sein, um eine Konsistenz zwischen Ihren Komponenten zu gewährleisten.
| Stütze | Erforderlich | Typen | Notizen |
|---|---|---|---|
collection | ✓ | [ any ] | Kann implizit von Helpern der Elternsammlung übergeben werden |
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> Rendern nur die Kinder, für die das Prädikat false zurückgibt. Das Gegenteil von <Filter> .
| Stütze | Erforderlich | Typen | Notizen |
|---|---|---|---|
collection | ✓ | [ any ] | Kann implizit von Helpern der Elternsammlung übergeben werden |
predicate | ✓ | function / object | Weitere Informationen finden Sie in Prädikaten |
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>Rendern Sie die Kinder, wenn das Prädikat für ein Kind zutreffend zurückgibt. Ein Fallback -Knoten kann zur Verfügung gestellt werden, um zu rendern, wenn das Prädikat für alle Kinder falsch zurückgibt. Ansonsten wird nichts gerendert.
Wenn kein Prädikat bereitgestellt wird, wird der Inhalt so, solange die Sammlung 1 Artikel oder mehr enthält. Wenn eine leere Sammlung geliefert wird, wird der Fallback -Inhalt gerendert.
| Stütze | Erforderlich | Typen | Notizen |
|---|---|---|---|
collection | ✓ | [ any ] | Kann implizit von Helpern der Elternsammlung übergeben werden |
predicate | ✕ | function / object | Weitere Informationen finden Sie in Prädikaten |
fallback | ✕ | node | Alternative Inhalte zu rendern, wenn das Prädikat bei allen Elementen false zurückgibt. |
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>Sortiert die Kinder auf einem Komparator.
| Stütze | Erforderlich | Typen | Notizen |
|---|---|---|---|
collection | ✓ | [ any ] | Kann implizit von Helpern der Elternsammlung übergeben werden |
comparator | ✓ | function / object | Weitere Informationen finden Sie in den Vergleichen |
descending | ✕ | boolean | Ob Sie in absteigender Reihenfolge sortieren, wenn Sie einen "String" -Vergleicher bereitstellen. Standardeinstellungen zu false (String -Komparatoren sortieren in Ascending). |
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 >
