如何在React項(xiàng)目中使用AntDesign

更新時(shí)間：2022年04月12日 10:43:50 作者：jGjHwTzBzEwSdTb

我們在后臺管理系統(tǒng)React項(xiàng)目開發(fā)中會有Table表格、Form表單、List列表、Button按鈕等組件，這個(gè)時(shí)候我們可以使用AntDesign來減少開發(fā)中不必要的樣式問題，本文就介紹了eact項(xiàng)目中使用AntDesign，感興趣的可以了解一下

0.前言

我們在后臺管理系統(tǒng)React項(xiàng)目開發(fā)中會有Table表格、Form表單、List列表、Button按鈕等組件，這個(gè)時(shí)候我們可以使用AntDesign來減少開發(fā)中不必要的樣式問題。

1.AntDesign是什么？

Ant Design 是一個(gè) UI 設(shè)計(jì)語言，是一套提煉和應(yīng)用于企業(yè)級后臺產(chǎn)品的交互語言和視覺體系

2.AntDesign如何使用？

首先你要安裝 yarn或npm或cnpm

$ yarn create react-app antd-demo 
# or 
$ npx create-react-app antd-demo
# or
$ npm create react-app antd-demo 
// 若網(wǎng)絡(luò)緩慢可使用cnpm淘寶鏡像
$ cnpm create react-app antd-demo

工具會自動初始化一個(gè)腳手架并安裝 React 項(xiàng)目的各種必要依賴

然后我們進(jìn)入項(xiàng)目并啟動。

$ cd antd-demo
$ yarn/npm/cnpm start

此時(shí)瀏覽器會訪問 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

而后需要引入AntD

現(xiàn)在從 yarn 或 npm 安裝并引入 antd。

$ yarn add antd

3.如何具體使用AntDdesign的組件

通用步驟是，先用import引入antd的具體某一個(gè)組件，然后根據(jù)規(guī)則及API使用

例：

3-1.如何使用 antd 的Table組件

import React from 'react';
import { Table } from 'antd';
import './App.css';

const columns = [
    { title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    { 
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
];

const data = [
    {
      key: 1,
      name: 'one',
      age: '10',
    },
    {
      key: 2,
      name: 'two',
      age: '20',
    },
];


const App = () => (
    <div className="App">
        <Table columns={columns} dataSource={data} />
    </div>
    );

export default App;

樣式如圖：

3-2.如何使用 antd 的Button組件

import React from 'react';
import { Button } from 'antd';

const App = () => (
      <div className="App">
          <Button type="primary">Primary Button</Button><br/>
          <Button>Default Button</Button><br/>
          <Button type="dashed">Dashed Button</Button><br/>
          <Button type="text">Text Button</Button><br/>
          <Button type="link">Link Button</Button><br/>
      </div>
    );


export default App;