快捷導(dǎo)航

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

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

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

0.前言

我們?cè)诤笈_(tái)管理系統(tǒng)React項(xiàng)目開(kāi)發(fā)中會(huì)有Table表格、Form表單、List列表、Button按鈕等組件，這個(gè)時(shí)候我們可以使用AntDesign來(lái)減少開(kāi)發(fā)中不必要的樣式問(wèn)題。

1.AntDesign是什么？

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

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

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

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

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

此時(shí)瀏覽器會(huì)訪問(wèn) 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;

4.后續(xù)

總結(jié)：總體來(lái)說(shuō)要使用ant具體的某一個(gè)組件，就要仔細(xì)觀看組件的API，以API為基準(zhǔn)來(lái)進(jìn)行開(kāi)發(fā)。

好處：用Ant開(kāi)發(fā)，省去了寫css樣式的問(wèn)題，同時(shí)，組件里也有相應(yīng)的JS方法，便于開(kāi)發(fā)

到此這篇關(guān)于如何在React項(xiàng)目中使用AntDesign的文章就介紹到這了,更多相關(guān)React使用AntDesign內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: