标签：from status splay com filter classname eve higher users
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
标签：from status splay com filter classname eve higher users
原文地址：http://www.cnblogs.com/Answer1215/p/6854732.html
