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('./class="lazy" data-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'
<div className="todo-title">任务列表</div>
注意手动添加标识符
例如：
.todo-title {
color: red;
}
二、 在react中create-react-app工程，它内置了cssModule功能，但是文件后缀一定要有xxx.module.css/scss
如果有scss文件，必须得安装yarn add sass
import styles from './style.module.css'引用：
<div className={styles.title}>任务列表</div>
<span className={done ? style.title : ''}>{title}</span>
到此这篇关于react装饰器与高阶组件及简单样式修改的操作详解的文章就介绍到这了,更多相关react装饰器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
