本篇内容主要讲解“React的装饰器和HOC怎么应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react的装饰器和HOC怎么应用”吧! 高阶组件&
本篇内容主要讲解“React的装饰器和HOC怎么应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react的装饰器和HOC怎么应用”吧!
简单来说,高阶组件是一个函数,能够接受一个组件并返回一个新的组件。
组件是将 props 转化成 UI ,然而 高阶组件将一个组价转化成另外一个组件。
ES7中的一种语法糖,与python中的装饰器使用及作用类似,其实就是以一种更为简洁的方式来来包装修改类的行为。装饰对象包括:类
、类的属性
、类的方法
。
由于属于新特性,如果在项目中使用需要使用babel
来进行转码。
安装babel插件:
Babel >= 7.x
Babel >= 7.x
npm install --save-dev @babel/plugin-proposal-decorators
Babel@6.x
npm install --save-dev babel-plugin-transfORM-decorators-legacy
.babelrc 配置:
Babel >= 7.x
{ "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ] }
Babel@6.x
{ "plugins": [ "transform-decorators-legacy" ] }
import React, {Component} from 'react';
const aDDDiv = (title) => (WrappedComponent) => class extends Component {
render() {
return (
<div>
<h2>{title}</h2>
<hr/>
<WrappedComponent/>>
</div>
)
}
};export default addDiv
//demo.js
import React, {Component} from 'react';
import addDiv from './addDiv.js';@addDiv('标题')
export default class Demo extends Component {
...
render() {
return(
<i>demo</i>
)
}
}
到此,相信大家对“react的装饰器和HOC怎么应用”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
--结束END--
本文标题: react的装饰器和HOC怎么应用
本文链接: https://www.lsjlt.com/news/99101.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0