在 ReactJS 上使用 Lodash 对映射列表进行排序
Posted
技术标签:
【中文标题】在 ReactJS 上使用 Lodash 对映射列表进行排序【英文标题】:Sort mapped list with Lodash on ReactJS 【发布时间】:2016-02-06 04:02:01 【问题描述】:我有一个数组:
people = [
name: "Kyle",
_id: "2"
,
name: Susan,
_id: "1"
]
我有一个这样的映射列表:
return (
<ul>
people.map( (person) =>
return (
<li>
<span>person.name</span>
<span>person.id</span>
</li>
)
)
</ul>
)
这一切都很好,但是我如何对它们进行排序,比如基于“名称”?我尝试使用[_.sortBy][1]
,但无法弄清楚它如何适合 React 和 map 函数的上下文。使用 lodash 或下划线的 _.sortBy 将不胜感激。
谢谢!
【问题讨论】:
【参考方案1】:你需要先导入
import sortBy from "lodash/sortBy";
然后你可以像这样使用它
const arr = [id: 2, id: 0];
sortBy(arr, "id");
【讨论】:
【参考方案2】:在_.sortBy
中,您可以传递将用于对您的集合进行排序的字段名称,了解更多关于_.sortBy
的信息
var Component = React.createClass(
getInitialState()
return
people: _.sortBy([
name: "Kyle", _id: 2,
name: "Susan", _id: 1
], '_id')
,
sortBy(field)
this.setState(
people: _.sortBy(this.state.people, field)
);
,
render: function()
var peopleList = this.state.people.map( (person, index) =>
return (<li key=index>
<span>person.name</span>
<span>person.id</span>
</li>);
)
return <div>
<a onClick=this.sortBy.bind(this, '_id')>Sort By Id</a> |
<a onClick=this.sortBy.bind(this, 'name')>Sort By Name</a>
<ul>peopleList</ul>
</div>;
);
Example
【讨论】:
【参考方案3】:你可以像这样使用 sortBy:
_.sortBy(<array name here>, '<key here>')
试试
return (
<ul>
_.sortBy(people, 'name').map( (person) =>
return (
<li>
<span>person.name</span>
<span>person.id</span>
</li>
)
)
</ul>
)
【讨论】:
以上是关于在 ReactJS 上使用 Lodash 对映射列表进行排序的主要内容,如果未能解决你的问题,请参考以下文章
在 Axios 请求上使用 Lodash 的 Debounce 会产生意想不到的结果
如何使用 JavaScript (lodash) 深度映射对象键?
使用 lodash 映射键或任何其他 javascript 方法 (NodeJs) 动态更改对象键
如何在 reactjs 中使用单个 ListItem 映射路由?