React Native中的函数调用

时间:2019-11-17 15:54:50

标签: javascript reactjs react-native

我试图在一个类中调用一个函数,但与以下语法混淆。

为什么在调用函数时需要使用bind方法?
   为什么箭头功能无法执行?

import React, { Component } from 'react'
import { Text, View } from 'react-native'  

//arrow function not getting executed!  
myFun = data => {
  console.warn(data);
}

myFun(data){
  console.warn(data);
}

class Hello extends Component {
  render() {
    return (
      <View>
        {this.myFun("first")}
        {this.myFun.bind(this, "second")}
      </View>
    );
  }
}

export default Hello;

注意:我已从第一种方法中删除了评论!

4 个答案:

答案 0 :(得分:1)

  1. 将函数放入类
  2. 在构造函数中绑定函数:

    this.handleChange = this.handleChange.bind(this);

  3. bind方法不执行函数/方法,仅返回具有新上下文(此)的函数

答案 1 :(得分:1)

在我们的案例this中,关键字Hello class保留了封闭词法上下文的值。正如您在示例this中看到的那样,这意味着Hello没有myFun,但是您正在尝试调用该函数!

因此,您可以将函数放在类中,或者不久后将调用方法更改为myFun("first")

最后,如果您需要在函数内使用this关键字,则必须使用bind(this)方法。

答案 2 :(得分:1)

应在类内部调用函数,以使其在此上下文中可用。

import React, { Component } from 'react'
import { Text, View } from 'react-native'  

class Hello extends Component {
constructor(props) {
    super(props);
}
//both normal fun and arrow fun should be inside class to get it executed!  
myFun1 = data => {
  console.warn(data);
}

myFun2(data){
  console.warn(data);
}


  render() {
    return (
      <View>
        {this.myFun("first")}
        {this.myFun2.bind(this, "second")}
      </View>
    );
  }
}

export default Hello;

当您使用this.myfun2.bind(this)时,您会将其添加到** this **的当前上下文中。基本上之后,只有您才能执行this.state,this.props,this.setstate等

绑定函数还返回一个有界函数,该有界函数稍后执行时,该函数将具有正确的上下文(“ this”)以调用原始函数。因此,在有用的情况下需要稍后在某些事件中调用该函数时,可以使用bind函数。

答案 3 :(得分:0)

您需要调用以下函数。

import React, { Component } from 'react'
import { Text, View } from 'react-native'  

myFun = data => {
  console.warn(data);
}

class Hello extends Component {
  render() {
    return (
      <View>
        {()=>this.myFun("first")}
      </View>
    );
  }
}

export default Hello;