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()')';
どうか私の投稿に目を通して、解決策を提案してください。
ありがとうございます。
オブジェクトを使用するか、クラス名を使用するかの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 (
<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.abc()
をnew B().abc()
に変更する必要がある;
このページでさまざまな解決策を試しましたが、うまくいきませんでした。 ここで別の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 (
<View style={styles.MainContainer}>
<View style={{margin: 10}}>
<Button title="Call Another Class Function Without Argument" onPress={this.CallFunction_1} />
</View>
<View style={{margin: 10}}>
<Button title="Call Another Class Function With Argument" onPress={this.CallFunction_2} />
</View>
</View>
);
}
}
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
}
});
コンストラクターを使用して親を作成し、コンポーネントクラスを拡張するためのスーパーメソッドにアクセスしてから、親クラスをエクスポートし、クラスのこのコンテキストによってこの関数にアクセスできるクラス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>
);
}
}
ファーストクラスで定義された関数を使用する別のクラスにファーストクラスをインポートします。 この場合、クラス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();
}
}