[Recompose] Transform Props using Recompose --mapProps _transform

亦余心之所善兮，虽九死其犹未悔。这篇文章主要讲述[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】