在 React 应用中，使用 redux 作为状态管理工具已经是非常常见的选择。而在 redux 联合 react 使用时，我们通常会使用 react-redux 来连接 redux 和组件，使得组件在访问状态时更加方便。
然而，当我们使用 prop-types 来做组件参数校验时，会发现传入的 connected 组件无法获取到 redux 常量，不再能像之前一样使用 PropTypes 进行校验。
在这篇文章中，我们将介绍一个 npm 包 react-redux-prop-types-fix 的使用方法来修复这个问题。
安装
使用 npm 可以在项目目录下运行 npm install react-redux-prop-types-fix，来安装 react-redux-prop-types-fix 包。
使用方法
在组件文件中引入 react-redux-prop-types-fix：
import PropTypes from 'prop-types';
import { fix } from 'react-redux-prop-types-fix';
import { connect } from 'react-redux';然后在组件的 propTypes 中使用 fix 包裹之前定义的校验方法：
Component.propTypes = fix({
myProp: PropTypes.string.isRequired,
});最后，将已经包装好的组件使用 connect 联接至 redux：
connect(mapStateToProps)(Component);
这样，redux 中的常量就可以被正确地传递给连接至 redux 的组件，并且可以进行参数校验。
示例代码
-- -------------------- ---- -------
------ --------- ---- -------------
------ - --- - ---- -----------------------------
------ - ------- - ---- --------------
----- ----------- ------- --------------- -
-------- -
----- - ------ - - -----------
------ ----------------------
-
-
--------------------- - -----
------- ----------------------------
---
----- --------------- - ------- -- --
------- --------------
---
------ ------- --------------------------------------
总结
react-redux-prop-types-fix 是一个很好用的 npm 包，可以使得我们使用 connect 时能够依旧使用 propTypes 进行参数校验。在 React 和 redux 联合开发中需要用到 PropTypes 做参数校验时，不妨尝试一下使用这个包，来提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005580b81e8991b448d52f6