前言
前端工程越来越复杂，我们需要一些方便好用的工具来辅助开发。本篇文章介绍的是一个实用的 npm 包，wtdc-react-component，可以快速构建 React 组件并提供一些优秀的功能和特性。如果你是 React 开发者，那么 wtdc-react-component 包将会是你不错的选择。
安装
在使用 wtdc-react-component 前，你需要了解一下它的安装方法：
使用 npm:
$ npm install wtdc-react-component --save
使用 yarn:
$ yarn add wtdc-react-component
使用
wtdc-react-component 提供了很多实用的组件，比如 Modal、Button、Popover 等，下面我将以 Modal 组件作为例子，提供它的使用教程：
1.引用 Modal 组件：
import { Modal } from "wtdc-react-component";2.在页面中使用 Modal 组件, 示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -----------------------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - -
------------ ------
--
-
-------- -
------ -
----------------
-------
----------- -- -
--------------- ------------ ---- ---
--
-
-- -----
---------
------
-----------------------------
----------- -- -
--------------- ------------ ----- ---
--
-
-----------
-----------
--------
-----------------
--
-
-
------ ------- -------------以上代码开启了一个 Modal， 当点击按钮时，弹出 Modal，Modal 内部的内容由传递给它的子元素决定。
<Modal open={this.state.isModalOpen} onClose={() => {}}>
<div>示例代码</div>
</Modal>API
Modal 组件提供了一些属性来控制其行为和显示，下面是 Modal 组件的 API 属性:
open
Boolean
是否展示 Modal 。
默认值: false。
onClose
function
关闭 Modal 时的回调函数。
默认值: undefined
style
Object
通过传递一个对象来改变 Modal 样式，组件 style 属性会将传递的 style 和内置的样式合并。
默认值: undefined。
overlayStyle
Object
通过传递一个对象来改变 Modal 灰色遮罩的样式。
默认值: undefined。
children
node
Modal 的内容组件。
总结
本文主要介绍了 wtdc-react-component 这个 npm 包的使用方法。在实际开发中， React 组件的重复构建是件麻烦的事情，wtdc-react-component 在这个方面提供了很大的帮助。可以通过它构建出很多好用的组件，比如 Button、Modal 等，减少我们重复编写代码的工作，提高了开发效率。希望这篇文章对你有所帮助，如果你有其他问题，欢迎评论和提问。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5a81e8991b448e5df1