在前端开发过程中，使用一些已经封装好的 npm 包可以大大提高我们的开发效率。本文将介绍一个常用的 npm 包 dr-react 的使用教程，这个 npm 包可以帮助我们在 React 项目中方便地使用一些常用的 UI 组件。
安装 dr-react
使用 npm 命令安装 dr-react：
npm install dr-react
使用 dr-react
在使用 dr-react 前，我们需要在项目中引入 react 和 react-dom：
import React from 'react'; import ReactDOM from 'react-dom';
然后，我们就可以引入 dr-react 中的组件了，比如 Button：
import { Button } from 'dr-react';在代码中使用 Button 组件:
<Button>Click Me</Button>
Button
Button 组件的 props 属性：
| 参数 | 说明 |
|---|---|
| type | 可选值为 'primary'（主按钮）、'default'（默认按钮）、'danger'（危险按钮） |
| size | 可选值为 'large'（大号按钮）、'default'（默认大小）、'small'（小号按钮） |
| onClick | 点击按钮时的回调函数 |
| disabled | 按钮是否禁用 |
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------ - ---- -----------
----- --- ------- --------------- -
----------- - -- -- -
------------------- -----------
--
-------- -
------ -
-----
------- -------------- ------------ ---------------------------
----- --
---------
--------------- ---------------
------- ------------- ------------ ---------
-------- ------
---------
------
--
-
-
-------------------- --- ---------------------------------Input
Input 组件的 props 属性：
| 参数 | 说明 |
|---|---|
| type | 可选值为 'text'（文本输入框）、'password'（密码输入框）、'number'（数字输入框）等 |
| value | 输入框的值 |
| onChange | 输入框值变化时的回调函数 |
| disabled | 输入框是否禁用 |
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----- - ---- -----------
----- --- ------- --------------- -
----------------- - - -- -
----------------------------
--
-------- -
------ -
-----
------ ----------- --------------------------------- --
------
--
-
-
-------------------- --- ---------------------------------总结
dr-react 提供了一些常用的 UI 组件，可以方便我们进行开发。在使用时需要先引入 React 和 react-dom，然后 import 相应的组件进行使用。本篇文章介绍了 Button 和 Input 两个组件的使用方法和 props 属性，供大家参考使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f72775841d3