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