Question

这是我的初始屏幕：

LoginScreen.js

List<>

我试图像这样调用下面的import { Toast } from 'native-base' class LoginScreen extends Component { showError(error) { Toast.show({ text: error }) } ..... } export default connect(mapStateToProps)(LoginScreen)函数：

loginAction.js

showError

我收到一条错误消息：

import LoginScreen from './LoginScreen'

let a = LoginScreen.showError('Testing')

Answer 1

由于showError与LoginScreen不相关，并且不使用其实例，因此不应将其用作其方法。在现代JavaScript中，将类用作名称空间是一种反模式，ES模块可实现此目的：

export function showError(error) {
  Toast.show({
    text: error
  })
}

class LoginScreen extends Component {...}

由于showError并没有做任何特定于登录屏幕的操作，并且可以在其他地方重用，因此可以将其从LoginScreen移至通用模块。

Answer 2

您可以静态定义要在另一个文件中调用的方法。就您而言：

import { Toast } from 'native-base'

class LoginScreen extends Component {

  static showError(error) {
    Toast.show({
      text: error
    })
  }

.....

}

export default connect(mapStateToProps)(LoginScreen)

然后像这样调用它：

import LoginScreen from './LoginScreen'

let a = LoginScreen.showError('Testing')

如何在React Native中从另一个文件调用类的函数？

2 个答案: