首页>编程相关>三方组件
下载

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 >
展开
附加信息
相关应用
为您推荐
相关资讯 全部