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

Question

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

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

在 Users.js 中，MODES 看起来像这样：

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

但我收到一条错误消息，指出 MODES 是 undefined。现在，我只是通过对值进行硬编码来解决它，但这并不优雅，我想改进它。我能做什么？

编辑：我在沙盒中重现了这个问题： codesandbox.io

Answer 1

这可行，但我建议将其保存在同一个文件中，因为它在定义 proptypes 时并未导入。

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

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

Answer 2

您有循环依赖。

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

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

依赖于 ManageUserForm.js

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