React反向代理與CSS模塊化的使用案例
更新時(shí)間：2023年02月06日 10:12:55 作者：碰磕
這篇文章主要介紹了React反向代理與CSS模塊化的使用案例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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都是公用的,
所以為了解決這個(gè)問題,改成模塊化
- 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了React中Ref 的使用方法,結(jié)合實(shí)例形式總結(jié)分析了react中ref基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
React中使用collections時(shí)key的重要性詳解
這篇文章主要給大家介紹了關(guān)于在React.js中使用collections時(shí)key的重要性，注意：一定不能不能忘了key，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
React Native自定義Android的SSL證書鏈校驗(yàn)
這篇文章主要為大家介紹了React Native自定義Android的SSL證書鏈校驗(yàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React組件中使用JSON數(shù)據(jù)文件的方法詳解
要在 React 組件中使用 JSON 數(shù)據(jù),有多種方法,這篇文章主要為大家詳細(xì)介紹了五個(gè)常見的方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下2024-01-01
react-intl實(shí)現(xiàn)React國際化多語言的方法
這篇文章主要介紹了react-intl實(shí)現(xiàn)React國際化多語言的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
使用Ant Design Anchor組件的一個(gè)坑及解決
這篇文章主要介紹了使用Ant Design Anchor組件的一個(gè)坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
構(gòu)建高性能?React?應(yīng)用程序的關(guān)鍵之一是避免不必要的重新渲染,React?的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至關(guān)重要,在這篇文章中,我們將介紹常見錯(cuò)誤以及如何避免它們,需要的朋友可以參考下2024-10-10
高階組件也就是我們常說的HOC,是React中用于復(fù)用組件邏輯的一種高級(jí)技巧。這篇文章主要通過一些示例帶大家學(xué)習(xí)一下高階組件的使用，希望對(duì)大家有所幫助2023-04-04
這篇文章主要介紹了react項(xiàng)目引入scss的方法,本文給大家介紹了React pwa的配置方法，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了react 組件傳值的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06