React-創建項目-引入antd-按需加載-自定義主題-裝飾器

創建項目：

npx create-react-app demo
cd demo
npm start　　

 

引入antd：

yarn add antd

import React from "react";
import Button from "antd/es/button";
import "antd/dist/antd.css";

function App() {
  return (
    <div className="App">
      app
      <Button type="primary">btn</Button>
    </div>
  );
}

export default App;

// ps：此時使用antd組件時的方式較麻煩且樣式全部引入增加代碼量，推薦按需引入的方式

 

引入antd按需加載時的配置：

首先安裝插件：

yarn add react-app-rewired customize-cra babel-plugin-import　　

其次添加配置項文件config-overrides.js：

const { override, fixBabelImports } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css",
  })
);

然后修改package.json文件中的啟動命令scripts：

{
  "name": "demo-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.4.3",
    "babel-plugin-import": "^1.13.0",
    "customize-cra": "^1.0.0",
    "react": "^16.13.1",
    "react-app-rewired": "^2.1.6",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}　　

最后按需引入antd中的組件，無需再單獨引入樣式文件，App.js：

import React from "react";
// import Button from "antd/es/button";
// import "antd/dist/antd.css";
import { Button } from "antd";

function App() {
  return (
    <div className="App">
      app
      <Button type="primary">btn</Button>
    </div>
  );
}

export default App;

 

 

antd自定義主題：需要用到less變量，可引入customize-cra中提供的less相關函數addLessLoader來幫助加載less樣式，同時修改config-overrides.js文件：

安裝less-loader：

yarn add less less-loader@5.0.0　　

修改配置文件config-overrides.js文件：

const { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "red" },
  })
);　　

 

 

高階組件-HOC：參數為組件，返回值為新組件的函數

　

const foo = (Cmp) => {
  return (props) => {
    return (
      <div className="border">
        <Cmp {...props} />
      </div>
    );
  };
};

// 雙箭頭函數等價於上面的雙return函數
const foo = (Cmp) => (props) => {
  return (
    <div className="border">
      <Cmp {...props} />
    </div>
  );
};

// 高階組件及鏈式調用：
import React, { Component } from "react";

// HOC 是個函數，接收一個組件，返回一個新的組件
function Child(props) {
  return <div>child</div>;
}
// Cmp這里是function或class組件 雙箭頭函數
const foo = (Cmp) => (props) => {
  return (
    <div className="border">
      <Cmp {...props} />
    </div>
  );
};


const foo2 = (Cmp) => (props) => {
  return (
    <div className="border1">
      <Cmp {...props} />
    </div>
  );
};

const Foo = foo2(foo(foo(Child)));
export default class HocPage extends Component {
  render() {
    return (
      <div>
        <h3>HocPage</h3>
        <Foo />
      </div>
    );
  }
}

 

裝飾器：

安裝裝飾器：

npm install -D @babel/plugin-proposal-decorators　　

更新config-overrides.js文件：

const { override, fixBabelImports, addLessLoader，addDecoratorsLegacy } = require("customize-cra");

module.exports = override(
  // antd按需加載配置
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  //   主題樣式配置
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "red" },
  }),
  addDecoratorsLegacy() // 配置裝飾器
);　　

文件中的裝飾器寫法：

import React, { Component } from "react";

// HOC 是個函數，接收一個組件，返回一個新的組件

// Cmp這里是function或class組件 雙箭頭函數
const foo = (Cmp) => (props) => {
  return (
    <div className="border">
      <Cmp {...props} />
    </div>
  );
};

const foo2 = (Cmp) => (props) => {
  return (
    <div className="border1">
      <Cmp {...props} />
    </div>
  );
};

@foo
@foo2
@foo
class Child extends Component {
  render() {
    return <div>child</div>;
  }
}

export default class DecoratorsPage extends Component {
  render() {
    return (
      <div>
        <h3>DecoratorsPage</h3>
        <Child />
      </div>
    );
  }
}

　　

　　

修正：

裝飾器按上述方法之后現在居然報錯了，需要額外多加一些修改：

將項目配置打散，然后在package.json配置文件中的babel屬性追加plugins配置

npm run eject


"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  },

 

　

參考&感謝各路大神：

https://www.e-learn.cn/topic/3824897