React-Nativeで他のクラスから関数を呼び出すには？

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 is not a function (evaluating 'B.default._abc()')&#39；

どうか私の投稿に目を通して、解決策を提案してください。

ありがとうございます。

プログラミング
react-native
27日 4月 2017 в 4:01
まだビューはありません
質問へのコメント (2)

オブジェクトを使用するか、クラス名を使用するかの2つのオプションがあります。オブジェクトから始めましょう。

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

もう1つの方法は、代わりにクラスを次のように使用することです。

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クラスはコンポーネントではなく、ヘルパークラスとして使用できます。

また、すでに述べたように、シングルトンパターンを使用してオブジェクトを処理する方法を強化することもできます。 https://stackoverflow.com/questions/44023879/react-native-best-way-to-create-singleton-pattern/45476473#45476473。

更新:クラス関数の代わりにコンポーネントを使用するように要求する場合は、次のように参照を介して呼び出すことができます。

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 (

        Click Me !
         (this._b = ref)} />

    );
  }
}
Hussam Kurd
編集した答え 12日 2月 2018 в 7:01
解説 (0)

これを解決するには、B.abc()をnew B().abc()に変更する必要がある；

Sᴀᴍ Onᴇᴌᴀ
編集した答え 13日 7月 2017 в 2:50
解説 (1)
ソリューション

このページでさまざまな解決策を試しましたが、うまくいきませんでした。 ここで別のWebページからソリューションをコピーしています。 とてもシンプルで印象的です。 簡単な解決策を探している人を助けるかもしれません:

React Nativeのデフォルトクラスから別のクラス関数を呼び出す方法。

これが完全な例コードです。

import { StyleSheet, View, Alert, Platform, Button } from 'react-native';

export default class MyProject extends Component {

  constructor(props) {

       super(props)

      Obj = new Second();

     }

     CallFunction_1=()=>{

      Obj.SecondClassFunction() ;

     }

     CallFunction_2=()=>{

            Obj.SecondClassFunctionWithArgument("Hello Text");

    }

  render() {

    return (

















    );
  }
}

class Second extends Component {

  SecondClassFunction=()=>{

    Alert.alert("Second Class Function Without Argument Called");

  }

  SecondClassFunctionWithArgument=(Value)=>{

    Alert.alert(Value);

  }

}

const styles = StyleSheet.create(
{
  MainContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    backgroundColor: '#F5FCFF',
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0
  }

});
解説 (2)

クラスBをエクスポートしていないことに気づきました。試してください。

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

次に、クラスAにインポートします。

。 'からBをインポートします。/ B ';。 。

これで問題が解決しました。

解説 (1)

コンストラクターを使用して親を作成し、コンポーネントクラスを拡張するためのスーパーメソッドにアクセスしてから、親クラスをエクスポートし、クラスのこのコンテキストによってこの関数にアクセスできるクラスAに拡張する必要があります。

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

    render() {
        return (

                Welcome to React Native

        );
    }
}

import B from './B.js';

export default class A extends B {

    _onItemPressed(item){
        this.abc();
    }

    render() {
        return (

                Click Me !

        );
    }
}
解説 (0)

abc関数をstaticにし、Bクラスをエクスポートする。

export default class B extends Component {

    static abc(){
      alert('Hello World');
    }
}
解説 (0)

ファーストクラスで定義された関数を使用する別のクラスにファーストクラスをインポートします。 この場合、クラス1からクラス2に定義された関数を使用しています。

export default class class1 extends React.Component{
constructor(props)
{
...
}

static function(){
...
}
}

**Now import it to another class i:e; class2**

import class1 from 'class1';

export default class class2 extends React.Component{

componentWillMount()
{
class1.function();
}

}
Sarthak Mishra
編集した答え 19日 2月 2019 в 9:32
解説 (1)

クラスBをエクスポートしておらず、インポートしているだけですね。クラスBファイルの一番下にexportステートメントを追加してみてください。

お役に立てれば幸いです。

解説 (0)