map-props

2019-07-13 admin

map-props是什么

什么是map-props,A higher order component to map React props

map-props使用教程帮助文档

#map-props

NPM Version NPM Downloads Build Status devDependency Status

map-props wraps a React component and allows mapping prop values passed in to other prop values expected by the wrapped component.


Installation

npm install --save map-props

Release Notes

This project follows SemVer and each release is posted on the Release Notes page.

Example

import React, {Component, PropTypes} from 'react';
import mapProps from 'map-props';

class UserProfile extends Component {
  static propTypes = {
    firstName: PropTypes.string.isRequired,
    lastName: PropTypes.string.isRequired
  }

  render() {
    const {firstName, lastName} = this.props;
    return <div className="user-profile">{firstName} {lastName}</div>;
  }
}

// wrap this component to create a component that expects only a fullName prop
UserProfile = mapProps({
  firstName: props => props.fullName.split(' ')[0],
  lastName: props => props.fullName.split(' ')[1]
})(UserProfile);

export default UserProfile;

Then render this component:

<UserProfile fullName="Bobby Tables"/>

Benefits

By mapping props using a Higher Order Component, you can increase the reusability of other “dumb” (pure and stateless) components.

Complimentary

This library was inspired by, and intended to be used in conjunction with redux, reselect and redux-form, although it does not depend on any of those libraries and can be used in any React-based project.

ES7 Decorator Sugar

Using ES7 decorator proposal, the example above could be written as:

@mapProps({
  firstName: props => props.fullName.split(' ')[0],
  lastName: props => props.fullName.split(' ')[1]
})
export default class UserProfile extends Component {

You can enable ES7 decorators with Babel Stage 1. Note that decorators are experimental, and this syntax might change or be removed later.

API

mapProps(mapping:Object)

-mapping : Object

a mapping from propName to a function that takes all the props and produces the value to pass to the wrapped component as propName.

This is an extremely young library, so the API may change. Comments and feedback welcome.

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69600.html

文章标题:map-props

回到顶部