日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

如何在React項目中使用AntDesign_React

作者：jGjHwTzBzEwSdTb ? 更新時間： 2022-06-12 編程語言

0.前言

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

1.AntDesign是什么？

Ant Design 是一個 UI 設計語言，是一套提煉和應用于企業級后臺產品的交互語言和視覺體系

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 
// 若網絡緩慢可使用cnpm淘寶鏡像
$ cnpm create react-app antd-demo

工具會自動初始化一個腳手架并安裝 React 項目的各種必要依賴

然后我們進入項目并啟動。

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

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

而后需要引入AntD

現在從 yarn 或 npm 安裝并引入 antd。

$ yarn add antd

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

通用步驟是，先用import引入antd的具體某一個組件，然后根據規則及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.后續

總結：總體來說要使用ant具體的某一個組件，就要仔細觀看組件的API，以API為基準來進行開發。

好處：用Ant開發，省去了寫css樣式的問題，同時，組件里也有相應的JS方法，便于開發

原文鏈接：https://juejin.cn/post/7085170302170202142

欄目分類
最近更新