React 使用Ant Design组件2020年11月

最新推荐文章于 2024-03-29 18:10:00 发布

ITKEY_

最新推荐文章于 2024-03-29 18:10:00 发布

阅读量440

点赞数

分类专栏： React 文章标签： react ant ant design

本文链接：https://blog.csdn.net/lxyoucan/article/details/109494901

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天同事问我一个问题，说他搭的ant项目样式错乱。我去看了一下，愣是看了半天没发现问题原因。最终后来才发现是Ant Design组件配置的问题。我不得不在这里吐槽一下And Design这篇文档https://mobile.ant.design/docs/react/introduce-cn，写的真不怎么样，关键地方不讲，我一个工作几年的人第一次看都有点蒙。

当前时间是：2020年11月04日。不排除是因为react手脚架更新导致配置发生变化了，对应文档没来急更新。我几个月前搭过一个使用Ant 组件的react项目，当时感觉没花多少时间，很简单。今天就把全新搭建过程记录下来，方便新手入门。

正片开始

吐槽完了，舒服多了，现在就开始吧。

create-react-app创建一个新的react项目

命令行中执行下面命令创建项目。

npx create-react-app ant-demo

这个过程有点久，我电脑需要2到5分钟左右。

显示这样就创建成功啦。

安装ant design组件

npm install antd-mobile --save

安装没什么好说的，执行一下就好了。

配置入口文件html

public/index.html的头部加入以下内容：

<!-- set `maximum-scale` for some compatibility issues -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>

修改以后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
    <!-- set `maximum-scale` for some compatibility issues -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

配置按需加载（重点）

重点来了，官方文档就是这里写的不太清楚，对新手不友好。

先安装下面已的组件。

npm install react-app-rewired customize-cra babel-plugin-import

在根目录新建config-overrides.js文件

此配置文件录入以下内容：

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

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    }),
);

修改packge.json 的配置文件

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react--app-rewired test",
    "eject": "react-scripts eject"
  },

至此配置完成啦！！！

测试效果

修改App.js为以下内容

import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
import React from "react";

function App() {
  return (
    <WingBlank>
    <Button>default</Button><WhiteSpace />
    <Button disabled>default disabled</Button><WhiteSpace />

    <Button type="primary">primary</Button><WhiteSpace />
    <Button type="primary" disabled>primary disabled</Button><WhiteSpace />

    <Button type="warning">warning</Button><WhiteSpace />
    <Button type="warning" disabled>warning disabled</Button><WhiteSpace />

    <Button loading>loading button</Button><WhiteSpace />
    <Button icon="check-circle-o">with icon</Button><WhiteSpace />
    <Button icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/jBfVSpDwPbitsABtDDlB.svg" alt="" />}>with custom icon</Button><WhiteSpace />
    <Button icon="check-circle-o" inline size="small" style={{ marginRight: '4px' }}>with icon and inline</Button>
    <Button icon="check-circle-o" inline size="small">with icon and inline</Button>
    <WhiteSpace />

    {/* <Button activeStyle={false}>无点击反馈</Button><WhiteSpace /> */}
    {/* <Button activeStyle={{ backgroundColor: 'red' }}>custom feedback style</Button><WhiteSpace /> */}

    <WhiteSpace />
    <Button type="primary" inline style={{ marginRight: '4px' }}>inline primary</Button>
    {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
    <Button type="ghost" inline style={{ marginRight: '4px' }} className="am-button-borderfix">inline ghost</Button>

    <WhiteSpace />
    <Button type="primary" inline size="small" style={{ marginRight: '4px' }}>primary</Button>
    <Button type="primary" inline size="small" disabled>primary disabled</Button>
    <WhiteSpace />
    <Button type="ghost" inline size="small" style={{ marginRight: '4px' }}>ghost</Button>
    {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
    <Button type="ghost" inline size="small" className="am-button-borderfix" disabled>ghost disabled</Button>
  </WingBlank>
  );
}

export default App;