React反向代理與CSS模塊化的使用案例
更新時間：2023年02月06日 10:12:55 作者：碰磕
這篇文章主要介紹了React反向代理與CSS模塊化的使用案例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
反向代理
官網(wǎng):[Proxying API Requests in Development | Create React App 中文文檔 (bootcss.com)
安裝使用
npm i http-proxy-middleware //安裝
編寫setupProxy.js
/**
* 設(shè)置代理
*/
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/ajax',//以ajax開頭
createProxyMiddleware({
target: 'https://i.maoyan.com',
changeOrigin: true,
})
);
};
測試案例
/**
* 反向代理
*/
import React, { Component } from 'react';
import axios from 'axios';
export default class DaiLi extends Component{
componentDidMount(){
axios.get("/ajax/mostExpected?limit=10&offset=0&token=&optimus_uuid=46E0ACB0E7E111ECB8920FC22EFCA8A202A7733C10C4484FB57F69AF4A705A69&optimus_risk_level=71&optimus_code=10").then(res=>{
console.log(res)
})
}
render() {
return (
<div>
反向代理
</div>
);
};
};
這樣就實(shí)現(xiàn)反向代理了，沒有跨域問題~
CSS模塊化
在不同組件中引入css但他們的css都是公用的,
所以為了解決這個問題,改成模塊化
- 1.將文件名改為文件名.module.css
- 2.將module.css引入
- 3.通過引入名.樣式名實(shí)現(xiàn)樣式的模塊化
這樣他就能保證樣式名不重復(fù)
案例
css文件Films.module.css
.active{
color: blueviolet;
}
import React from 'react';
import style from './css/Films.module.css'
function Films(){
console.log(style);
return (
<div>
Films
<b className={style.active}>去404頁(編程式導(dǎo)航)</b>
</div>
);
}
export default Films
這樣就能實(shí)現(xiàn)樣式自由!!!
到此這篇關(guān)于React反向代理與CSS模塊化的使用案例的文章就介紹到這了,更多相關(guān)React反向代理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了react中的props 的使用及進(jìn)行限制的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
this在javascript中已經(jīng)相當(dāng)靈活，這篇文章主要介紹了React.js綁定this的5種方法(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
下面小編就為大家?guī)硪黄獪\談react.js 之 批量添加與刪除功能。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
React鉤子函數(shù)之useDeferredValue的基本使用示例詳解
useDeferredValue是React 18中非常有用的一個鉤子函數(shù)，它可以幫助我們優(yōu)化渲染性能，并讓UI更加流暢，如果你還沒有嘗試過它，不妨在你的下一個React項(xiàng)目中試一試，這篇文章主要介紹了React鉤子函數(shù)之useDeferredValue的基本使用,需要的朋友可以參考下2023-08-08
詳解create-react-app 自定義 eslint 配置
這篇文章主要介紹了詳解create-react-app 自定義 eslint 配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
React中memo useCallback useMemo方法作用及使用場景
這篇文章主要為大家介紹了React中三個hooks方法memo useCallback useMemo的作用及使用場景示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助2023-03-03
React組件對子組件children進(jìn)行加強(qiáng)的方法
這篇文章主要給大家介紹了關(guān)于React組件中對子組件children進(jìn)行加強(qiáng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當(dāng)中去，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11
教你應(yīng)用?SOLID?原則整理?React?代碼之單一原則
這篇文章主要介紹了如何應(yīng)用?SOLID?原則整理?React?代碼之單一原則,今天，我們將從一個糟糕的代碼示例開始，應(yīng)用 SOLID 的第一個原則，看看它如何幫助我們編寫小巧、漂亮、干凈的并明確責(zé)任的 React 組件，需要的朋友可以參考下2022-07-07
如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器
這篇文章主要介紹了如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器,在vue及react中經(jīng)常會遇到，今天通過實(shí)例代碼給大家講解，需要的朋友可以參考下2018-11-11