以antd为例 React+Typescript 引入第三方UI库-Toy模板网

这篇具有很好参考价值的文章主要介绍了以antd为例 React+Typescript 引入第三方UI库。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文我们来说说第三方UI库
其实应用市场上的第三方UI库都是非常优秀的
那么 react 我们比较熟的肯定还是 antd 我们还是来用它作为演示

这边我们先访问他的官网 https://3x.ant.design/index-cn
点击开始使用
以antd为例 React+Typescript 引入第三方UI库,react.js,typescript,ui
在左侧有一个在 TypeScript 中使用
通过图标我们也可以看出这个UI库与react的关系不一般

上面这种快速创建一个项目的就算了不太适合我们的情况

我们看下面引入的方式
以antd为例 React+Typescript 引入第三方UI库,react.js,typescript,ui
这里我们还是用 npm的方式
打开我们的项目终端输入

npm install antd --save

这样依赖包就进来了
以antd为例 React+Typescript 引入第三方UI库,react.js,typescript,ui
然后我们

npm start

启动项目
以antd为例 React+Typescript 引入第三方UI库,react.js,typescript,ui
这边也是没有任何问题

然后我们按这个文档的案例将自己的组件改一改
以antd为例 React+Typescript 引入第三方UI库,react.js,typescript,ui

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>
        )
    }
}

运行项目
以antd为例 React+Typescript 引入第三方UI库,react.js,typescript,ui
按钮就出现了

然后我们尝试一个其他组件
以antd为例 React+Typescript 引入第三方UI库,react.js,typescript,ui
编写代码如下

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>
        )
    }
}