如何在React Native中從另一個文件調用類的函數？

Question

這是我的初始屏幕：

LoginScreen.js

import { Toast } from 'native-base'

class LoginScreen extends Component {

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

.....

}

export default connect(mapStateToProps)(LoginScreen)

我試圖像這樣調用下面的showError函數：

loginAction.js

import LoginScreen from './LoginScreen'

let a = LoginScreen.showError('Testing')

我收到一個錯誤消息：

LoginScreen.showError() is not a function

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')