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のボタンを押した後に来て、 '未定義が関数でない（評価' Bを.default._abc（） '）'

Ple親切に私のポストを通過し、私にいくつかの解決策を提案してください。

おかげ

Answer 1

私はあなたが唯一のインポートされ、クラスBを輸出していないことがわかります。 export default Bのように、クラスBファイルの末尾にexportステートメントを追加してみてください。

・ホープこれはあなたがnew B().abc()にB.abc()を変更する必要があり、これを解決するために、あなたのクラスを開始いけない

Answer 2

に役立ちます。

Answer 3

abc関数を静的にし、Bクラスをエクスポートします。

export default class B extends Component { 

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

Answer 4

私はあなたのクラスBが

import B from './B';

はこれがあなたのために働いていた場合、私に教えてください

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

は、クラスでそれをインポートしてみエクスポートされませんでした気づきました。

Answer 5

あなたは2つのオプションがあり、どちらかあなたはこのファイルを呼び出すときですから、次

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

のような機能をABCにアクセスできるオブジェクトを使用するか、クラス名を使用して、のは、オブジェクト

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

から始めましょうし

他の方法は、クラスを使用する代わりとして、あなたがこれを呼び出すときに

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

に従うことですBクラスはコンポーネントではありません、あなたはヘルパークラスとしてそれを使用することができます：あなたは、次の

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

ノートのような機能をABCにアクセスできるファイル。

私はすでに React native- Best way to create singleton pattern

UPDATEに言及としても、あなたはシングルトンパターンを使用してオブジェクトを扱う方法を向上させることができます：あなたが代わりにクラスの機能のコンポーネントを使用することを主張する場合、あなたはそれを呼び出すことができます次のように参照することにより、：

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

    render() { 
     return null 
    } 
} 

を今コンポーネントで、あなたは参照することにより

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

をBを呼び出すことができます

Answer 6

コンストラクタを使用して親を作成し、コンポーネントクラスを拡張するためのスーパーメソッドにアクセスし、親クラスをエクスポートし、クラスAのコンテキストに拡張します。クラス

のコンテキストによってこの関数にアクセスできます。

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

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






import B from './B.js'; 

export default class A extends B { 

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

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