react-propmatch:propmatch对于所有高阶分量都是有用的实用程序

  • i6_533498
    了解作者
  • 4.9KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 09:02
    上传日期
propmatch对于所有高阶分量都是有用的实用程序。 这很有用,因为字符串是组成中的脆性标识符,它使您可以查看道具在包装组件中的位置。 安装 react-propmatch上。 npm install react-propmatch 指导 注意:本指南假定您将es6与babel结合使用,并且使用可选的'es7.classProperties'转换。 让我们从编写一个简单的高阶组件开始,该组件发送当前时间作为道具。 为了简洁起见,省略了细节。 function providesTime ( Component ) { return class TimeProvider extends React . Component { constructor ( ) { ... } componentDidMount ( ) { ... } componentWill
react-propmatch-master.zip
  • react-propmatch-master
  • src
  • findPropType.js
    368B
  • index.js
    1.7KB
  • .babelrc
    65B
  • .npmignore
    0B
  • test
  • index.test.js
    862B
  • findPropType.test.js
    600B
  • README.md
    2.6KB
  • .gitignore
    18B
  • package.json
    581B
内容介绍
propmatch is a useful utility for all high order components. It's useful because strings are brittle identifiers in composition, and it allows you to see where props are coming from in the wrapped component. ## Install react-propmatch is [available on npm][npm]. ```sh npm install react-propmatch ``` [npm]: https://www.npmjs.com/package/react-propmatch ## Guide Note: This guide assumes you're using es6 with babel, and the optional 'es7.classProperties' transform. Let's start by writing a simple high order component that sends the current time as a prop. The details are omitted for brevity. ```js function providesTime(Component){ return class TimeProvider extends React.Component { constructor(){ ... } componentDidMount(){ ... } componentWillUnmount(){ ... } render(){ return <Component {...this.props} time={this.state.time} /> } }; } @providesTime class Clock { render(){ return <div>new Date(this.props.time).toString()</div>; } } ``` Because string keys are brittle and conflict prone, and the origin of props is often unclear, we can use react-propmatch to enable a clearer way of describing the relationship. ```js import propMatch from 'react-propmatch'; var {propTypes, makeFactory} = propMatch({time: null}); function providesTime(Component){ var {makeProps, restPropTypes} = makeFactory(Component); return class TimeProvider extends React.Component { static propTypes = restPropTypes; constructor(){ ... } componentDidMount(){ ... } componentWillUnmount(){ ... } render(){ return <Component {...this.props} {...makeProps({time: this.state.time})} /> } }; } // expose the propTypes providesTime.propTypes = propTypes; @providesTime class Clock { render(){ return <div>new Date(this.props.time).toString()</div>; } } ``` And this behaves exactly like the first example. So let's say that our clock want's to take a prop called 'time' which is a boolean. If true, don't render the date. Damn, we have a conflict. Well instead of changing clock's api, or having to change the possibly third-party `providesTime`, we just declare our propTypes. ```js @providesTime class Clock { static propTypes = { time: PropTypes.boolean, milliseconds: providesTime.propTypes.time, }; render(){ var d = new Date(this.props.milliseconds); return <div>{this.props.time ? d.toTimeString() : d.toString()}</div>; } } ``` react-propmatch looks at the propTypes and tries to find a match. It falls back to using the keys you provide initially, which is why it defaults to 'time' here. That's all, happy high order component making!
评论
    相关推荐
    • npm-install:用于npm的Cloud Native Buildpack
      Paketo NPM安装Cloud Native Buildpack NPM安装CNB利用安装在中的工具来管理应用程序依赖性。 积分 NPM安装CNB提供node_modules作为依赖项。 下游buildpack可以通过生成如下所示的文件来要求node_modules依赖项: ...
    • RAX:使用Web技术制作的开源C ++ IDE
      通过网络技术制作的开源C ++ IDE。 使用“ npm install”来获取所有依赖项。 您还应该安装g ++编译器。 使用“ npm start”预览RAX或使用“ npm run make”构建它。 随时为回购做贡献。 Imgur画廊: ://imgur....
    • car-sharing-project
      汽车共享项目 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 check path in your ide npm run lint 自定义配置 请参阅。
    • identity-generator:具有控制台Web应用程序的电子邮件访问权限的高级身份生成器npm模块
      npm install --save identity-generator 用法 const identity = require ( 'identity-generator' ) identity . generate ( ) . then ( data => { console . log ( data ) } ) 这将生成一个完全随机的标识,并...
    • npm_module:粘合剂实施为NPM模块
      dhcp npm模块 将粘合剂实现为NPM模块,以用于NextJS项目。 该模块旨在用作服务器端渲染应用程序的一部分。 它获取针对所消费内容计划的广告,并将其用作Freewheel Ad Server或Google ad Manager的自定义参数。 ...
    • hexlet-ide:hexlet 的 Web IDE
      npm i --save hexlet-ide 2. require hexlet-ide frontend module var HexletIde = require("hexlet-ide/src/editor/main"); 3. Create widget var widget = HexletIde.create(document.getElementById("ide"), {...
    • tiny::upside-down_face:Npm软件包-删除字符串中的所有空格
      $ npm install @bamblehorse/tiny 用法 const tiny = require ( "@bamblehorse/tiny" ) ; tiny ( "So much space!" ) ; //=> "Somuchspace!" tiny ( 1337 ) ; //=> Uncaught TypeError: Tiny wants a string! // at ...
    • treeline, 在 Treeline IDE中,用于处理风帆应用和machinepacks的CLI工具.zip
      treeline, 在 Treeline IDE中,用于处理风帆应用和machinepacks的CLI工具 treeline( 译): 网站开始 命令行实用程序,用于在Treeline中使用帆应用程序和机器。安装 $ npm install -g treeline这将允许你在命令行中...
    • dynamic-watermark:使用npm包在图像上添加图像或文本水印,即动态水印
      动态水印是npm水印模块,用于在图像上添加水印。 它可以在给定位置添加图像以及文本水印。 在添加水印方面做得很好。 npm install dynamic-watermark --save 成功安装动态水印后,请执行以下步骤: 步骤1:包含...
    • d3-convention:D3公约编码为npm
      D3编码为npm软件包。 来自想法“分叉” 安装 d3-convention依赖d3作为对等方依赖项 npm install d3 d3-convention 例子 var c = require ( 'd3-convention' ) ( ) c . svg . append ( 'rect' ) . attr ( { width ...