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类按钮后会出现错误消息，＆＃39; undefined不是一个功能（评估＆＃39; B.default._abc（）＆＃39;） ＆＃39;

请仔细阅读我的帖子并向我推荐一些解决方案。

由于

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

现在在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.abc()更改为new B().abc();

Answer 3

我注意到你没有出口你的班级B.试试

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

然后在A类中导入

import B from './B';

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

Answer 4

您必须使用构造函数创建父级，访问super方法以扩展组件类，然后导出父类并在类A上扩展它，您可以通过此类的上下文访问此函数/ p>

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

Answer 5

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

How to Call Another Class Function From Default Class in React Native

这是完整的示例代码：

var jsonBody = new ObjectRoot()
{
    productId = "productId",
    questions = new[]
    {
        new Question() {
            questionId = "b2b-2.01",
            question ="Vad är syftet med ert engagemang hos oss?",
            helpText = null,
            questionType = "MultiChoise",
            answerChoices = new []{
                new AnswerChoice{
                    answerChoiceId = "",
                    value = "",
                    subQuestions = new List<object>() // empty collection                        
                }
            }.ToList(),
            answers = new List<object>()
        }
    }.ToList()
};

Answer 6

我可以看到你没有导出B类，你只是导入。请尝试在B类文件的底部添加export语句，如export default B。

希望这有帮助

Answer 7

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

export default class B extends Component {

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

Answer 8

将第一类导入另一个要使用第一类中定义的函数的类。在这种情况下，我们使用的是在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();
}



}

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

8 个答案: