如何从 React-Native 中的另一个类调用函数? [英] How to call a function from another class in React-Native?

问题描述

我正在研究 React-Native，我想从不同的类调用一个函数，但是当我尝试这样做时，它显示了一些错误.

I am working on React-Native, i want to call a function from different class but when i am trying to do it's showing some error.

A级

import B from './B.js';

class A extends Component {
    _onItemPressed(item){
        B.abc();
    }

    render() {
      return (
         <TouchableHighlight
            underlayColor={Colors.colors.lightgrey}
            style={{padding: 15}}
            onPress={this._onItemPressed.bind(this)}>
         <Text>Click Me !</Text>
         </TouchableHighlight>
      );
    }
}

B级

class B extends Component {

    abc(){
      alert('Hello World');
    }

    render() {
      return (
         <View>
            <Text>Welcome to React Native</Text>
         </View>
      );
    }
}

但是在 A 类中按下按钮后会出现错误消息，'undefined is not a function (evaluating 'B.default._abc()')'

But error message is coming after pressing the button in Class A, 'undefined is not a function (evaluating 'B.default._abc()')'

请仔细阅读我的帖子并建议我一些解决方案.

Please kindly go through my post and suggest me some solution.

谢谢

推荐答案

你有两个选择，要么使用对象，要么使用类名，让我们从对象开始

You have two options, either to use an object or use class name, let's start with object

class B {
  abc() {
    alert("Hello World");
  }
}
const b = new B();
export default b;

所以当你调用这个文件时，你可以像下面这样访问abc函数

So when you call this file you can access the function abc like the following

import b from './B.js';
class A extends Component {
    _onItemPressed(item){
        b.abc();
    }
...

另一种方法是使用类代替如下

The other way is to use class instead as follow

class B{}
B.abc = function(){
    alert("Hello World");
}
module.exports = {
  functions: B
};

所以当你调用这个文件时，你可以像下面这样访问abc函数

So when you call this file you can access the function abc like the following

import b from './B.js';
class A extends Component {
    _onItemPressed(item){
        b.functions.abc();
    }
...

注意:B 类不应该是一个组件，你可以将它用作辅助类.

Note: B class should not be a component, you can use it as a helper class.

此外，您可以使用单例模式增强处理对象的方式，正如我在React native- 创建单例模式的最佳方式

also, you can enhance the way you deal with the object using singleton pattern as I already mention in React native- Best way to create singleton pattern

UPDATE:如果坚持使用组件而不是类函数，可以通过引用调用，如下:

UPDATE: If you insist to use component instead of a class function, you can call it through reference, as follows:

export default class B extends Component {
  constructor(props) {
    super(props);
    this.abc = this.abc.bind(this);
   }
    abc(){
      alert('Hello World');
    }

    render() {
      return null
    }
}

现在在 A 组件中你可以通过引用调用 B

now in A component you can call B by reference

import B from "./B.js";
class A extends Component {
  _onItemPressed(item) {
    this._b.abc();
  }
  render() {
    return (
      <TouchableHighlight
        underlayColor={Colors.colors.lightgrey}
        style={{ padding: 15 }}
        onPress={this._onItemPressed.bind(this)}
      >
        <Text>Click Me !</Text>
        <B ref={ref => (this._b = ref)} />
      </TouchableHighlight>
    );
  }
}

这篇关于如何从 React-Native 中的另一个类调用函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！