欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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>
    );
  };
};

這樣就實現(xiàn)反向代理了，沒有跨域問題~

CSS模塊化

在不同組件中引入css但他們的css都是公用的,

所以為了解決這個問題,改成模塊化

  • 1.將文件名改為文件名.module.css
  • 2.將module.css引入
  • 3.通過引入名.樣式名實現(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

這樣就能實現(xiàn)樣式自由!!!

到此這篇關(guān)于React反向代理與CSS模塊化的使用案例的文章就介紹到這了,更多相關(guān)React反向代理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • React中Ref 的使用方法詳解

    React中Ref 的使用方法詳解

    這篇文章主要介紹了React中Ref 的使用方法,結(jié)合實例形式總結(jié)分析了react中ref基本功能、用法及操作注意事項,需要的朋友可以參考下
    2020-04-04
  • React中使用collections時key的重要性詳解

    React中使用collections時key的重要性詳解

    這篇文章主要給大家介紹了關(guān)于在React.js中使用collections時key的重要性，注意：一定不能不能忘了key，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-08-08
  • React Native自定義Android的SSL證書鏈校驗

    React Native自定義Android的SSL證書鏈校驗

    這篇文章主要為大家介紹了React Native自定義Android的SSL證書鏈校驗示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • React組件中使用JSON數(shù)據(jù)文件的方法詳解

    React組件中使用JSON數(shù)據(jù)文件的方法詳解

    要在 React 組件中使用 JSON 數(shù)據(jù),有多種方法,這篇文章主要為大家詳細(xì)介紹了五個常見的方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下
    2024-01-01
  • react-intl實現(xiàn)React國際化多語言的方法

    react-intl實現(xiàn)React國際化多語言的方法

    這篇文章主要介紹了react-intl實現(xiàn)React國際化多語言的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • 使用Ant Design Anchor組件的一個坑及解決

    使用Ant Design Anchor組件的一個坑及解決

    這篇文章主要介紹了使用Ant Design Anchor組件的一個坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • React避免不必要的重新渲染的方法示例

    React避免不必要的重新渲染的方法示例

    構(gòu)建高性能?React?應(yīng)用程序的關(guān)鍵之一是避免不必要的重新渲染,React?的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至關(guān)重要,在這篇文章中,我們將介紹常見錯誤以及如何避免它們,需要的朋友可以參考下
    2024-10-10
  • React用法之高階組件的用法詳解

    React用法之高階組件的用法詳解

    高階組件也就是我們常說的HOC,是React中用于復(fù)用組件邏輯的一種高級技巧。這篇文章主要通過一些示例帶大家學(xué)習(xí)一下高階組件的使用，希望對大家有所幫助
    2023-04-04
  • react項目引入scss的方法

    react項目引入scss的方法

    這篇文章主要介紹了react項目引入scss的方法,本文給大家介紹了React pwa的配置方法，通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-04-04
  • react 組件傳值的三種方法

    react 組件傳值的三種方法

    這篇文章主要介紹了react 組件傳值的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06

最新評論