共计 2133 个字符,预计需要花费 6 分钟才能阅读完成。
导读 | 这篇文章主要介绍了 react 装饰器与高阶组件及简单样式修改的操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧 |
装饰器 用来装饰类的,可以增强类,在不修改类的内部的源码的同时,增强它的能力 (属性或方法)
装饰器使用 @函数名写法,对类进行装饰,目前在 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 {color: red;}
二、在 react 中 create-react-app 工程,它内置了 cssModule 功能,但是文件后缀一定要有 xxx.module.css/scss
如果有 scss 文件,必须得安装 yarn add sass
import styles from './style.module.css'
引用:
任务列表
{title}
到此这篇关于 react 装饰器与高阶组件及简单样式修改的操作详解的文章就介绍到这了
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)