简介
在 React 应用中，我们常常需要编写大量的组件代码，并且这些组件可能存在许多共性，例如绑定事件、数据校验、权限检测等等。这时候，我们可以使用 react-component-decorators 包来简化我们的代码。react-component-decorators 是一个用于封装 React 组件通用功能的 npm 包，可以在组件上方便地添加一些装饰器，从而实现一些通用功能，提高开发效率。
安装
使用 npm 进行安装：
npm install react-component-decorators --save
使用
在需要使用组件的文件中，首先引入组件：
import { ComponentDecorator, ValidationDecorator, AuthDecorator } from 'react-component-decorators';然后，我们就可以在组件类上添加装饰器了。例如，我们可以在组件上添加一个 ValidationDecorator，来实现表单数据校验的功能：
@ValidationDecorator
class MyComponent extends React.Component {
...
}这样，我们就可以在组件中使用 this.props.errors 和 this.props.validate 等属性和方法来实现表单校验了。
除了 ValidationDecorator，react-component-decorators 还提供了 AuthDecorator 和 ComponentDecorator 等装饰器，用于实现权限检测和组件装饰等功能。
示例代码
下面是一个使用 ValidationDecorator 的简单示例：
-- -------------------- ---- -------
------ - ------------------- - ---- -----------------------------
--------------------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----- ---
------ ---
--------- ---
---------------- ---
--
-
------------------------ -
---------------
-------------------- -------------------
---
-
------------------- -
-----------------------
----- ------ - ------------------------------- -
----- -----------
------ -----------------
--------- -----------------
---------------- -------------------------
---
-- --------------------------- - -- -
--------------------
- ---- -
----------------- ------ -------------
-
-
-------- -
------ -
----- ----------------------------------------
------ ----------- ----------- ----------------------- -------------------------------------------- --
------ ------------ ------------ ------------------------ -------------------------------------------- --
------ --------------- --------------- --------------------------- -------------------------------------------- --
------ --------------- ---------------------- ---------------------------------- -------------------------------------------- --
------- -----------------------------
-------
--
-
-在这个示例中，我们首先导入了 ValidationDecorator，然后在组件类上使用 @ValidationDecorator 装饰器来添加表单校验功能。接着，我们在组件中使用 this.props.validate 方法对表单数据进行校验，通过 this.props.errors 展示错误信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552d981e8991b448d042c