Question

我创建了一个最小的React Native项目来演示这个问题： https://github.com/allenhsu/ReactNativeImportTest

尝试react-native run-ios并查看控制台日志。

主要检查4个JS文件，index.ios.js，common/TestView.js，common/colors.js和common/index.js。

在common/index.js中，我以多种方式重新导出了TestView和Colors。

在index.ios.js中，我从common模块导入了TestView。

在common/TestView.js中，我从common模块导入了颜色，也直接从common/colors.js导入了颜色：

import {
  Colors,
  DefaultColors,
} from './';

import AnotherColors from './colors';

console.log('Colors out of component:');
console.log(Colors);
console.log(DefaultColors);
console.log(AnotherColors);

export default class TestView extends Component {
  render() {
    console.log('Colors in render:');
    console.log(Colors);
    console.log(DefaultColors);
    console.log(AnotherColors);
    return (
      <View>
        <Text>
          I'm a test view.
        </Text>
      </View>
    );
  }
}

输出结果为：

Colors out of component:
TestView.js:17 undefined // Colors
TestView.js:18 Object {white: "#FFFFFF", black: "#000000"} // DefaultColors
TestView.js:19 Object {white: "#FFFFFF", black: "#000000"} // AnotherColors

TestView.js:23 Colors in render:
TestView.js:24 Object {white: "#FFFFFF", black: "#000000"} // Colors
TestView.js:25 Object {white: "#FFFFFF", black: "#000000"} // DefaultColors
TestView.js:26 Object {white: "#FFFFFF", black: "#000000"} // AnotherColors

我唯一的问题是，为什么第一个是undefined？导入common/index.js的导航首先导出，然后导出名称为Colors。

如果我将TestView的重新导出更改为：

，更有趣的是

export { default as TestView } from './TestView';

组件中的第二个DefaultColors也将是未定义的。

更新

如果我在index.ios.js中做同样的事情，那么所有三个变量都是在Component之外定义的。所以我认为它与common/index.js和common/TestView.js的循环导入有某种关联。

为什么在某些情况下这种导入是不确定的？

0 个答案: