小编典典

在React中调用函数

reactjs

我是React的初学者,对于在React中调用函数有些困惑。

我看到了以下几种方法,但我不知道何时使用每种方法以及哪种方法。

  • handleAddTodo ={this.handleAddTodo}
  • handleAddTodo ={this.handleAddTodo()}
  • handleAddTodo ={handleAddTodo}
  • handleAddTodo ={this.handleAddTodo}
  • handleAddTodo ={handleAddTodo()}

这些可以互换吗?我可以通过调用函数的方式来处理事件吗?


阅读 737

收藏
2020-07-22

共1个答案

小编典典

这些可以互换吗?

简短答案:不可以。


让我们看看您发布的不同片段:

someFunction()someFunction

使用前一种语法,您实际上是在调用该函数。后者只是对该功能的引用。那么我们什么时候使用哪个呢?

  • someFunction()当您要调用该函数并立即返回其结果时,将使用该函数。在React中,这通常是在将JSX代码的一部分拆分为单独的函数时看到的。出于可读性或可重用性的原因。例如:
        render() {
      myFunction() {
        return <p>Foo Bar</p>;
      }
      return (
        <div>
          {myFunction()}
        </div>
      );
    }

  • someFunction当您只想将对该函数的引用传递给其他对象时,可以使用该函数。在React中,这通常是一个事件处理程序,该事件处理程序通过传递给另一个子组件,props以便该组件可以在需要时调用该事件处理程序。例如:
        class myApp extends React.Component {
      doSomething() {
        console.log("button clicked!");
      }
      render() {
        return (
          <div>
            <Button someFunction={this.doSomething} />
          </div>
        );
      }
    }

    class Button extends React.Component {
      render() {
        return (
          <button onClick={this.props.someFunction}>Click me</button>
        );
      }
    }

someFunction()this.someFunction()

这与功能的上下文有关。基本上,“此功能在哪里?”。是当前Component的一部分,然后使用this.someFunction(),是作为道具传入的父Component的一部分,然后使用this.props.someFunction()。它是当前方法内部的一个函数,然后只需使用即可someFunction()

显然,还有更多的东西,但这是我能给出的最好的基本总结。

为了更好的理解,请
在这里

阅读。对于this关键字如何在Javascript中,特别是在React中如何工作,它是一个很好的指南。

2020-07-22