从基础组件导入找不到变量 [英] import from base component can't find variable

问题描述

我创建了一个 BaseComponent，它将在所有其他组件中进行扩展:

I have created one BaseComponent which will be extended in all other components :

import React, { Component } from 'react'
import { ScrollView, Text, Image, View, TouchableOpacity, TextInput } from 'react-native'

export default class BaseComponent extends Component {

}

在我的其他组件中，我使用它:

And in my other components i am using it like :

import BaseComponent from '../Components/BaseComponent'

export default class LoginScreen extends BaseComponent {

}

现在我已经在 BaseComponent 中导入了 View、ScrollView 等，但是当我尝试在子组件中使用它时，它显示了 can'find 的错误变量视图.

Now i have imported View,ScrollView etc in BaseComponent but when i am trying to use it in child component, it is showing error that can'find variable View.

如何在 ChildComponent 中使用导入的 BaseComponnet 类?

How can i use imported class of BaseComponnet in ChildComponent?

推荐答案

在 Nodejs 中，每个文件都被视为一个模块，具有自己的变量范围.例如，当您将变量导入文件时，例如 React 或 ScrollView，您将此变量添加到模块范围，而不是全局范围.

In Nodejs each file is a treated as a module, that has its own scope of variables. When you import variable into file say React or ScrollView for example, you add this variable to the module scope, but not to the global scope.

在 webpack 的情况下，你可以使用 ProvidePlugin 将一些导入作为全局

In case of webpack you can use ProvidePlugin to a few imports as global

new webpack.ProvidePlugin({
  React: 'react' // ReactJS module name in node_modules folder
})

之后，您可以跳过在所有模块中导入这些变量变量，因为 webpack 会在任何需要的地方自行处理.

After that you are able to skip importing these variables variable in all of your modules as webpack will do it itself handle it whereever needed.

这篇关于从基础组件导入找不到变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！