首页 > 代码库 > [Recompose] Transform Props using Recompose --mapProps
[Recompose] Transform Props using Recompose --mapProps
Learn how to use the ‘mapProps‘ higher-order component to modify an existing component’s API (its props). ‘mapProps‘ takes incoming props and changes them however you’d like; for example, filtering the props by a field.
For example, we have a UserList component:
import React from ‘react‘;const User = ({name, status}) => <div>{name} - status</div>;const UserList = ({users, status}) => <div> <h3>{status} User</h3> { users && users.map((user, i) => <User {...user} key={i} />) } </div>;export default UserList;
And using it to display three different types of user list:
const users = [ { name: "Tim", status: ‘active‘ }, { name: "Bob", status: ‘active‘ }, { name: "Joe", status: ‘pending‘ }, { name: "Jim", status: ‘inactive‘ },];
<section> <h3>Active users</h3> <UserList users={users.filter(u => u.status === ‘active‘) }/> <h3>Inactive users</h3> <UserList users={users.filter(u => u.status === ‘inactive‘) }/> <h3>Pending users</h3> <UserList users={users.filter(u => u.status === ‘pending‘) }/> </section>
Now let‘s say we want to hide the implement detail, instead just showing three different components.
<div className="App"> <ActiveUsers users={ users } /> <InactiveUsers users={ users } /> <PendingUsers users={ users } /> </div>;
import React from ‘react‘;import {mapProps} from ‘recompose‘;const User = ({name, status}) => <div>{name} - status</div>;const UserList = ({users, status}) => <div> <h3>{status} User</h3> { users && users.map((user, i) => <User {...user} key={i} />) } </div>;const filterByStatus = (status) => mapProps( ({users}) => ({ status, users: users.filter(u => u.status === status) }));export const ActiveUsers = filterByStatus(‘active‘)(UserList);export const InactiveUsers = filterByStatus(‘inactive‘)(UserList);export const PendingUsers = filterByStatus(‘pending‘)(UserList);export default UserList;
[Recompose] Transform Props using Recompose --mapProps
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。