React native 如何在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.js”导入B；
类扩展组件{
_未压缩（项目）{
B.abc（）；
}
render（）{
返回(
点击我！
);
}
}

B类

class B extends Component {

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

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

B类扩展组件{
abc（）{
警报（“你好世界”）；
}
render（）{
返回(
欢迎来到这里
);
}
}

但按下A类中的按钮后会出现错误消息，“未定义不是函数（计算“B.default.\u abc（）”）”

请仔细阅读我的帖子，并提出一些解决方案

---

谢谢

我可以看到您没有导出B类，您只是在导入。请尝试在B类文件的底部添加一个

export

语句，如so

export default B

---

希望这有助于您不要启动您的课程，要解决此问题，您需要将

B.abc（）

更改为

new B（）.abc（）

使abc函数为静态并导出B类

export default class B extends Component {

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

---

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

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

然后在类A中导入它

从“/B”导入B；

---

让我知道这是否对您有效。

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

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

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

另一种方法是使用类，如下所示

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

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

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

此外，您还可以增强使用singleton模式处理对象的方式，正如我在中已经提到的

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

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

    render() {
      return null
    }
}

现在在组件中，您可以通过引用调用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.js”导入B；
类扩展组件{
_未压缩（项目）{
这个；
}
render（）{
返回(
点击我！
（此._b=ref）}/>
);
}
}

您必须使用构造函数创建父类，访问super方法以扩展组件类，然后导出父类并在类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>
        );
    }
}

导出默认的B类扩展组件{
建造师（道具）{
超级（道具）；
}
abc（）{
警报（“你好世界”）；
}
render（）{
返回(
欢迎来到这里
);
}
}
从“/B.js”导入B；
导出默认类A扩展B{
_未压缩（项目）{
这是abc（）；
}
render（）{
返回(
点击我！
);
}
}

将第一个类导入另一个类中，您要在其中使用第一个类中定义的函数。在本例中，我们使用在class1到class2中定义的函数

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



}

---

我在这个页面上尝试了各种解决方案，但都不起作用。我正在从另一个网页复制解决方案。非常简单，令人印象深刻。可能有助于寻找简单的解决方案：

以下是完整的示例代码：

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
  }

});

从'react native'导入{样式表、视图、警报、平台、按钮}；
导出默认类MyProject扩展组件{
建造师（道具）{
超级（道具）
Obj=新的第二个（）；
}
调用函数_1=（）=>{
Obj.SecondClassFunction（）；
}
调用函数_2=（）=>{
Obj.SecondClassFunctionWithArgument（“Hello Text”）；
}
render（）{
返回(
);
}
}
第二类扩展组件{
SecondClassFunction=（）=>{
Alert.Alert（“未调用参数的第二类函数”）；
}
SecondClassFunctionWithArgument=（值）=>{
警报。警报（值）；
}
}
const styles=StyleSheet.create(
{
主容器：{
为内容辩护：“中心”，
对齐项目：“居中”，
弹性：1，
背景颜色：“#F5FCFF”，
paddingTop:（Platform.OS）='ios'？20:0
}
});

您试图直接使用组件类吗？您需要实例化该类或将该方法更改为static才能调用它。嘿，谢谢，但我想使函数为static，而不是static。您知道如何在类A中访问该函数吗？我如何使用它。请与您的代码共享一些解释作为答案。我也在尝试同样的方法。我可以从另一个类调用方法，但我不能更改状态请你检查酷…除了它可以比你上面解释的更简单，但它确实有帮助。我不知道为什么这不是正确的答案！您好，hussam kurd在组件B中，我正在使用setState，它抛出如下错误：警告：无法对尚未安装的组件调用setState。这是一个no-op，但它可能表示应用程序中存在错误。相反，直接分配给

this.state

，或者定义一个

state={}在组件中具有所需状态的类属性。你能帮我一下吗？你在哪里执行了B组件中的设置状态？