Question

我有一个import.js，我正在编写所有模块＆＃39;在那里的路径。例如。 color.js和button.js在import.js中被识别。然后我想从其他组件中调用我的导入。我可以打电话给所有模块＆＃39;在main.js中导入但是在button.js中，我无法调用color.js 当在import.js中导入其中一个js文件时，它无法调用import.js中的任何js文件。它也给出了这个错误：

1.undefined不是一个对象（评估＆＃39; COLOR.BUTTONDARK＆＃39;）

2. [致命] [tid：com.facebook.react.RCTExceptionsManagerQueue]未处理的JS 异常：undefined不是对象（评估＆＃39; COLOR.BUTTONDARK＆＃39; ）

3. [error] [tid：com.facebook.react.JavaScript]模块AppRegistry不是 注册的可调用模块。

//import.js
module.exports = {
  BUTTON: require('./../components/XYZButton'),
  COLOR: require('./../styles/colors'),
};


//colors.js
module.exports = {
  BUTTONDARK: '#084C6E',
  TEXTLIGHT: '#FFFFFF'
  };


//xyzbutton.js
const COLOR = require('./../constants/imports');
class XYZButton extends React.Component {
  render() {
  return (
    <TouchableHighlight>
      <View style={{backgroundColor:COLOR.BUTTONDARK}}>
        <Text style={{color:COLOR.TEXTLIGHT}}>
          {'TEST'}
        </Text>
      </View>
    </TouchableHighlight>
  );
  }
}
module.exports = (XYZButton);


//main.js
const {BUTTON, COLOR} = require('./../../../../constants/imports');
class Main extends React.Component {
  render() {
    return (
    <View style={{backgroundColor:COLOR.BUTTONDARK}}>
      <BUTTON
        onPress = {() => {
          this._handleSelectModulPage()
        }}
        style = {{
        alignItems: 'center',
        justifyContent: 'center'
        }}
      />
    </View>
    );
  }
}
module.exports = (Main);

Answer 1

我认为你有一个循环依赖。您需要在完成导入其定义之前定义的内容。

main.js需要imports.js
imports.js需要XYZButton.js
XYZButton.js需要imports.js，此时尚未完成加载自己的依赖项。然后它将返回一个未定义的对象，它会为您提供COLOR常量的错误。

您实际想要做的是完全废弃imports.js，只需要从其他文件中获取相对路径。拥有imports.js文件并不能给你带来任何好处。

在导入js中React Native调用组件

1 个答案: