在React中调用函数 [英] Calling a function in React

问题描述

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

I'm a beginner in React, and I'm a little confused about calling a function in React.

我看到了以下几种方式，但我没有知道何时使用每个以及哪个。

I saw the following ways and I don't know when to use each and which one.

• handleAddTodo = {this.handleAddTodo}


• handleAddTodo = {this.handleAddTodo（）}


• handleAddTodo = {handleAddTodo}


• handleAddTodo = {this.handleAddTodo}


• handleAddTodo = {handleAddTodo（）}

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

这些是可互换的？我可以通过调用函数的相同方法来处理事件吗？

Are these interchangeable? Could I do that to handle an event, the same way to call a function?

推荐答案

是这些可互换吗？

Are these interchangeable?

简短答案：否。

让我们看看您发布的不同代码段：

Let's take a look at the different snippets you've posted:

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

With the former syntax, you are actually invoking that function. The latter is just a reference to that function. So when do we use which?

• 您将使用 someFunction（）当您希望调用该函数并立即返回其结果时。在React中，这通常是在将JSX代码的一部分拆分为单独的函数时看到的。出于可读性或可重用性的原因。例如：

• You would use someFunction() when you want that function invoked and its result returned immediately. In React, this is typically seen when you split parts of your JSX code to a separate function; either for reasons of readability or reusability. For example:

render() {
  myFunction() {
    return <p>Foo Bar</p>;
  }
  return (
    <div>
      {myFunction()}
    </div>
  );
}

• 当您只想将对该函数的引用传递给其他对象时，可以使用 someFunction 。在React中，这通常是一个事件处理程序，该事件处理程序通过 props 传递给另一个子组件，以便该组件可以在需要时调用事件处理程序。例如：

• You would use someFunction when you want only to pass the reference to that function to something else. In React, this is usually an event handler that is passed down to another child-component via props so that that component can call the event handler when it needs to. For example:

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

这与函数的上下文有关。基本上，此功能在哪里？。是当前组件的一部分，然后使用 this.someFunction（），它是作为道具传入的父组件的一部分，然后使用 this。 props.someFunction（）。它是当前方法中的一个函数，然后只需使用 someFunction（）。

This has to do with the context of the function. Basically, "where is this function?". Is part of the current Component, then use this.someFunction(), is it part of the parent Component passed in as props, then use this.props.someFunction(). Is it a function inside the current method, then just use someFunction().

显然，还有更多功能

为了更好地理解，请阅读在此处 。这是很好的指南，说明 this 关键字如何在Javascript中，尤其是在React中工作。

For a better understanding, have a read here. It is a great guide to how the this keyword works in Javascript and in React in particular.

这篇关于在React中调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！