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 >
*/Jouez avec une démo en direct.
<Every><Filter><Find><First><Last><Map><Reject><Reverse><Some><Sort> Ainsi, React Collection Aiders est une expérience, conçue pour tester si le modèle de composant de React est logique lorsqu'il est utilisé pour la manipulation du tableau.
Je crois que c'est plus agréable, pour les raisons décrites ci-dessus, que la manipulation de vanille JS dans la méthode de rendu de votre composant. Cela dit, c'est souvent le mauvais endroit pour faire ce genre de logique .
Pour les très grandes collections, ou pour les composants qui rendent fréquemment, il est logique de déplacer ce type de manipulation intense dans des fonctions mémorisées. Si vous utilisez Redux, alors la résidence est probablement un meilleur endroit pour faire ce type de travail.
Cela signifie également que votre couche de présentation n'a jamais à se préoccuper de ce travail, ce qui est généralement une bonne chose.
Pour les petites applications (ou des sections simples dans les grandes applications), les aides à la collection React peuvent être une belle touche. Pour les applications Redux, cependant, il y a souvent une meilleure façon.
En fin de compte, React Collection Helers est construit comme point de départ, pas comme une destination finale. J'ai l'impression avec suffisamment d'essais et d'erreurs, nous pourrions tomber sur quelque chose de vraiment innovant et utile. Je vais continuer à expérimenter, et je nous encourage tous à garder un esprit ouvert et un œil sur de nouvelles possibilités passionnantes.
npm i -S react-collection-helpers
Les versions UMD sont également disponibles via CDN:
(Si vous utilisez la construction UMD, la variable globale est CollectionHelpers )
Ce projet est une expérience pour tester l'utilité des manipulateurs de collecte dans le facteur de forme composante.
Quand je dis que c'est une expérience, je ne veux pas nécessairement dire que c'est expérimental . Je suis assez convaincu qu'il est stable et sûr à utiliser dans la production; Le code est assez simple.
Je veux plutôt dire que je ne suis pas convaincu que cela résout un vrai problème. J'aimerais entendre des utilisateurs qui les mettent en œuvre; Cela améliore-t-il l'expérience de développement de vous ou de votre équipe? Pensez-vous que l'idée a du potentiel si elle allait dans une certaine direction? Je suis ouvert à l'exploration des idées tangentielles.
Faites-moi savoir sur Twitter ou par e-mail
Importez le (s) composant (s) dont vous avez besoin:
// ES6 modules
import { Find , Every , Map } from 'react-collection-helpers' ;
// CommonJS
const { Find , Every , Map } = require ( 'react-collection-helpers' ) ;Alternativement, vous pouvez importer des composants individuellement, pour éviter de regrouper les composants que vous n'utilisez pas:
// 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' ; En savoir plus sur la meilleure façon d'utiliser les aides React Collection avec ces guides approfondis:
<Every>Rendez les enfants si le prédicat revient vrai pour chaque enfant. Un nœud de secours peut être fourni, à rendre si le prédicat renvoie faux pour tout enfant. Sinon, rien ne sera rendu.
Si aucun prédicat n'est fourni, le contenu sera rendu tant que la collection aura 1 élément ou plus. Si une collection vide est fournie, le contenu de secours sera rendu.
| Soutenir | Requis | Types | Notes |
|---|---|---|---|
collection | ✓ | [ any ] | Peut être implicitement transmis par les aides à la collection parentaux |
predicate | ✕ | function / object | Voir les prédicats pour plus d'informations |
fallback | ✕ | node | Contenu alternatif à rendre si le prédicat renvoie faux sur des éléments. |
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> Rendez uniquement les enfants pour lesquels le prédicat revient true .
| Soutenir | Requis | Types | Notes |
|---|---|---|---|
collection | ✓ | [ any ] | Peut être implicitement transmis par les aides à la collection parentaux |
predicate | ✓ | function / object | Voir les prédicats pour plus d'informations |
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> Rendez le premier enfant pour lequel le prédicat renvoie true .
| Soutenir | Requis | Types | Notes |
|---|---|---|---|
collection | ✓ | [ any ] | Peut être implicitement transmis par les aides à la collection parentaux |
predicate | ✓ | function / object | Voir les prédicats pour plus d'informations |
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>Renvoie les 1 premier ou plus des éléments de la collection. Généralement uniquement utile en tant qu'enfant à un autre aide de collection.
| Soutenir | Requis | Types | Notes |
|---|---|---|---|
collection | ✓ | [ any ] | Peut être implicitement transmis par les aides à la collection parentaux |
num | ✕ | number | Par défaut est 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> Renvoie les 1 derniers articles ou plus de la collection. L'opposé de <First> . Généralement uniquement utile en tant qu'enfant à un autre aide de collection.
| Soutenir | Requis | Types | Notes |
|---|---|---|---|
collection | ✓ | [ any ] | Peut être implicitement transmis par les aides à la collection parentaux |
num | ✕ | number | Par défaut est 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>L'assistant de collection le plus simple, ne fait pas grand-chose. Peut être utile pour assurer la cohérence entre vos composants.
| Soutenir | Requis | Types | Notes |
|---|---|---|---|
collection | ✓ | [ any ] | Peut être implicitement transmis par les aides à la collection parentaux |
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> Rendez uniquement les enfants pour lesquels le prédicat revient false . L'opposé de <Filter> .
| Soutenir | Requis | Types | Notes |
|---|---|---|---|
collection | ✓ | [ any ] | Peut être implicitement transmis par les aides à la collection parentaux |
predicate | ✓ | function / object | Voir les prédicats pour plus d'informations |
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>Rendez les enfants si le prédicat revient vrai pour tout enfant. Un nœud de secours peut être fourni, pour être rendu si le prédicat revient faux pour tous les enfants. Sinon, rien ne sera rendu.
Si aucun prédicat n'est fourni, le contenu sera rendu tant que la collection aura 1 élément ou plus. Si une collection vide est fournie, le contenu de secours sera rendu.
| Soutenir | Requis | Types | Notes |
|---|---|---|---|
collection | ✓ | [ any ] | Peut être implicitement transmis par les aides à la collection parentaux |
predicate | ✕ | function / object | Voir les prédicats pour plus d'informations |
fallback | ✕ | node | Contenu alternatif à rendre si le prédicat renvoie faux sur tous les éléments. |
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>Trie les enfants en fonction d'un comparateur.
| Soutenir | Requis | Types | Notes |
|---|---|---|---|
collection | ✓ | [ any ] | Peut être implicitement transmis par les aides à la collection parentaux |
comparator | ✓ | function / object | Voir les comparateurs pour plus d'informations |
descending | ✕ | boolean | Que ce soit à trier dans l'ordre descendant, lors de la fourniture d'un comparateur «String». Par défaut est false (les comparateurs de chaînes trient en ascendant). |
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 >
