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

Question

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

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. 然后Users.js再次导入ManageUserForm.js

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

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