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

Question

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

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不是函数(评估'B.default._abc()') '

请通过我的帖子,并建议我一些解决方案.

谢谢

Answer 1

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

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

因此，当您调用此文件时，可以像下面这样访问函数abc

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

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

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

因此，当您调用此文件时，可以像下面这样访问函数abc

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

注意：B类不应该是组件，可以将其用作帮助器类。

同样，您可以增强使用单例模式处理对象的方式，正如我在React native中提到的 那样-创建单例模式的最佳方法

更新：如果您坚持使用组件而不是类函数，则可以通过引用调用它，如下所示：

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

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>
    );
  }
}

Answer 2

我注意到你没有导出你的 B 类。试试

class B extends Component {
   static abc(){
     alert('Hello World');
   }}
export default B

然后在A类中导入

import B from './B';

如果这对你有用，请告诉我。

Answer 3

您不启动您的课程，要解决此问题，您需要B.abc()将new B().abc();