本文 我們來說說 第三方UI庫
其實(shí)應(yīng)用市場上的 第三方UI庫都是非常優(yōu)秀的
那么 react 我們比較熟的肯定還是 antd 我們還是來用它作為演示
這邊 我們先訪問他的官網(wǎng) https://3x.ant.design/index-cn
點(diǎn)擊開始使用
在左側(cè) 有一個(gè) 在 TypeScript 中使用
通過圖標(biāo)我們也可以看出 這個(gè)UI庫與react的關(guān)系不一般
上面這種 快速創(chuàng)建一個(gè)項(xiàng)目的 就算了 不太適合我們的情況
我們看下面引入的方式
這里 我們還是用 npm的方式
打開我們的項(xiàng)目 終端輸入
npm install antd --save
這樣 依賴包就進(jìn)來了
然后 我們
npm start
啟動項(xiàng)目
這邊也是沒有任何問題
然后 我們按這個(gè)文檔的案例 將自己的組件改一改
import * as React from "react";
import Button from 'antd/es/button';
interface IProps {
}
export default class hello extends React.Component<IProps,any> {
public readonly state: Readonly<any> = {
data: []
}
public constructor(props:IProps){
super(props);
}
public render() {
return (
<div>
<Button type="primary">Button</Button>
</div>
)
}
}
運(yùn)行項(xiàng)目
按鈕就出現(xiàn)了
然后 我們嘗試一個(gè)其他組件
編寫代碼如下文章來源：http://www.zghlxwxcb.cn/news/detail-696636.html
import * as React from "react";
import { Progress } from 'antd';
interface IProps {
}
export default class hello extends React.Component<IProps,any> {
public readonly state: Readonly<any> = {
data: []
}
public constructor(props:IProps){
super(props);
}
public render() {
return (
<div>
<Progress type="circle" percent={75} />
<Progress type="circle" percent={70} status="exception" />
<Progress type="circle" percent={100} />
</div>
)
}
}
運(yùn)行結(jié)果如下
文章來源地址http://www.zghlxwxcb.cn/news/detail-696636.html
到了這里，關(guān)于以antd為例 React+Typescript 引入第三方UI庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
