在react中导入ES模块

Question

我想将屏幕导入到我的反应性导航中，但是当我导入类React.Component时，它的身份不明。

我的routes.js

import * as Screens from '../screens/index';
import {FontIcons} from '../assets/icons';

export const MainRoutes = [
  {
    id: 'LoginMenu',
    title: 'Marketing',
    icon: FontIcons.login,
    screen: Screens.GridV1,
    children: [
      {
        id: 'Login1',
        title: 'Login V1',
        screen: Screens.GridV1,
        children: []
      },
      {
        id: 'Login2',
        title: 'Login V2',
        screen: 'GridV2',
        children: []
      },
      {
        id: 'SignUp',
        title: 'Sign Up',
        screen: 'GridV2',
        children: []
      },
      {
        id: 'password',
        title: 'Password Recovery',
        screen: 'GridV2',
        children: []
      },
    ]
  }
];

我的屏幕/index.js

export * from './navigation';
export * from './dash';

当我检查屏幕导入时

console.log(Screens);

​

​

一切都很好。但当我执行

console.log(Screens.GridV1);

​

​

我上不了GridV1课

请帮助我在这里解决我的问题。谢谢你

Answer 1

从Screens的chrome快照中可以看出，此时console.log，Screens对象只包含一个元素{__esModule: true}。GridV1、GridV2和所有其他模块都在延迟的情况下被解决。

因此，您应该看到它适用于setTimeout，例如：

setTimeout( () => console.log(Screens.GridV1), 100 );

但真正的问题仍然隐藏在背后。通常情况下，import javascript模块不会产生这样的副作用，它应该会像您预期的那样工作。检查这些模块是否有任何特殊的初始化机制。