Cara melaksanakan pemuatan atas permintaan secara bertindak balas

Cara melaksanakan pemuatan atas permintaan dalam React: 1. Muatkan komponen dengan tepat melalui "import 'antd/lib/button/style'" 2. Laksanakan pemuatan atas permintaan dengan bekerjasama dengan "babel-plugin -import" plug-in; 3. Gunakan "babel-plugin-import+react-app-rewired" untuk memuatkan atas permintaan.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi react18, komputer Dell G3.

Bagaimana untuk melaksanakan pemuatan atas permintaan dalam tindak balas?

3 cara untuk melaksanakan pemuatan atas permintaan dalam React

1 Muatkan komponen dengan tepat

import Button from 'antd/lib/button'
import 'antd/lib/button/style'

2 bekerjasama Pemalam babel-plugin-import melaksanakan pemuatan atas permintaan

babel-plugin-import ialah pemalam babel untuk pemuatan atas permintaan komponen dan gaya

Konfigurasi terdedah

npm run eject

Pasang pemalam

 npm install babel-plugin-import -S

Ubah suai package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style":"css"
        }
      ]
    ]
  }

Selepas konfigurasi, import terus: import {Button} daripada 'antd'

3. Melalui babel- pemalam-import+react-app-diwayar semula melaksanakan pemuatan atas permintaan

react-app-rewired memanjangkan konfigurasi webpack tanpa konfigurasi terdedah

  //安装插件:
   npm install babel-plugin-import -S
  //修改(添加)config-overrides.js文件
  //引入react-app-rewired添加babel插件的函数
  const {injetBabelPlugin}=require('react-app-rewired')
  module.exports=function override(config,env){
 config=injetBabelPlugin([
    [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style":"css"
        }
      ]
 ],config);
 return config
 }:

Secara langsung selepas konfigurasi Pengenalan: import {Button} daripada 'antd'

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Cara melaksanakan pemuatan atas permintaan secara bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!