如何在React PropTypes中使用导入的值？

编程问答 2022-08-13

问题描述

我正在为功能组件创建PropTypes，并且我想对从另一个文件导入的对象使用PropTypes.oneOf：

import { MODES } from '../../../Users';
(...)
ManageUserForm.propTypes = {
    mode: PropTypes.oneOf(Object.values(MODES)),}

在Users.js中，模式如下所示：

export const MODES = {
    add: 'add',edit: 'edit',changePassword: 'changePassword',block: 'block',unblock: 'unblock',delete: 'delete'
};

但是我收到一条错误消息，指出 MODES 是undefined。现在，我仅对值进行硬编码解决了问题，但是这很微不足道，我想对其进行改进。我该怎么办？

编辑：我在沙箱中重新创建了问题： codesandbox.io

解决方法

这可以工作，但是我建议将其保存在同一文件中，因为在定义原型时未将其导入。

ManageUserForm.propTypes = {
  mode: PropTypes.oneOf(Object.values(require('../../../Users'))),}

这是一个代码沙盒示例 https://codesandbox.io/s/react-example-forked-y1br4?file=/index.js

,

您具有循环依赖项。

  1. 首先，代码从Users.js导入App.js。
  2. 然后Users.js导入UserCreator.js。
  3. 然后UserCreator.js导入ManageUserForm.js。
  4. 然后ManageUserForm.js再次导入Users.js

所有这些甚至在定义MODES变量之前。 您不应该在Users.js中导入ManageUserForm.js，因为Users.js本身取决于ManageUserForm.js到UserCreator.js。

您可以将MODES的定义移至ManageUserForm.js并将其导入Users.js，或者最好将其完全移至单独的文件。

javascriptreact-proptypesreactjsreactjs