日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react裝飾器與高階組件及簡單樣式修改的操作詳解_React

作者：勇敢*牛牛 ? 更新時間： 2022-11-14 編程語言

使用裝飾器調用

裝飾器 用來裝飾類的，可以增強類，在不修改類的內部的源碼的同時，增強它的能力(屬性或方法)

裝飾器使用@函數名寫法，對類進行裝飾，目前在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'
<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>

原文鏈接：https://niuniu.blog.csdn.net/article/details/126984533

欄目分類
最近更新