良许Linux教程网 干货合集 react装饰器与高阶组件及简单样式修改的操作方法

react装饰器与高阶组件及简单样式修改的操作方法

这篇文章主要介绍了react装饰器与高阶组件及简单样式修改的操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

image-20221004214416355

使用装饰器调用

装饰器 用来装饰类的,可以增强类,在不修改类的内部的源码的同时,增强它的能力(属性或方法)

装饰器使用@函数名写法,对类进行装饰,目前在js中还是提案,使用需要配置相关兼容代码库。

react脚手架创建的项目默认是不支持装饰器,需要手动安装相关模块和添加配置文件

安装相关模块

yarn add -D customize-cra react-app-rewired  @babel/plugin-proposal-decorators

修改package.json文件中scripts命令

"scripts": {
   "start""react-app-rewired start",
   "build""react-app-rewired build",
   "test""react-app-rewired test",
   "eject""react-scripts eject"
 }

在项目根目录中添加config-overrides.js配置文件

此文件可以理解为就是webpack.config.js的扩展文件

const { resolve } = require('path')
const { addDecoratorsLegacy, override } = require('customize-cra')
// 增强自定义给webpack添加相关配置
const custom = () => config => {
 config.resolve.alias['@'] = resolve('./src')
 return config
}
module.exports = override(addDecoratorsLegacy(), custom())

一般加上这个就行:

// 增量配置当前项目中的webpack配置,建议在react18中不要用
// 建议在react18中也不要用装饰器
// override 方法,如果webpack中有此配置则,覆盖,如果没有则添加
const { addDecoratorsLegacy, override } = require('customize-cra')
// 追加上一个装饰器
module.exports = override(addDecoratorsLegacy())

装饰器的使用

装饰类

装饰函数,在装饰时它没有写小括号,target它就是当前你装饰的类

添加静态方法/属性:

不是成员方法

const handle = target =>{
   target.run = ()=>{
       console.log("run");
   }
}
@handle
class Demo {};
const d = new Demo();
Demo.run();

添加成员方法/属性:

const handle = target =>{
   target.prototype.run = ()=>{
       console.log("run");
   }
}
@handle
class Demo {};
const d = new Demo();
d.run();

装饰器加上了小括号,则定义函数时一定要返回一个新函数

const handle = (msg) => target =>{
   target.prototype.run = ()=>{
       console.log("run",msg);
   }
}
@handle("我爱你")
class Demo {};
const d = new Demo();
d.run();

装饰成员属性

装饰器装饰成员属性,装饰时没有写小括号

装饰器装饰成员属性,装饰时没有写小括号
target 装饰的类的实例 new Demo  this
key 当前的成员属性名称  username
description 就是当前属性在对象中它的描述 Object.defineProperty
const handle = (target, key, description) => {
 // 设置当前属性为只读属性
 // description.writable = false
 console.log(target, key, description)
}
class Demo {
 @handle
 username = 'abc'
}

高阶组件

定义高阶组件,用来进行全局布局

1.它就是一个函数

2.参数首字母大写,因为你传入的是一个组件,在react中组件的调用必须首字母大写

3.返回一个组件

简单的样式修改

一、没有使用cssModule时,只能直接导入

import './style.css'
"todo-title">任务列表

注意手动添加标识符

例如:

.todo-title {
 color: red;
}

二、 在react中create-react-app工程,它内置了cssModule功能,但是文件后缀一定要有xxx.module.css/scss

如果有scss文件,必须得安装yarn add sass

import styles from './style.module.css'

引用:

任务列表
done ? style.title : ''}>{title}

到此这篇关于react装饰器与高阶组件及简单样式修改的操作详解的文章就介绍到这了

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
x
x