在 React 中调用函数

Question

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

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

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

这些可以互换吗？我可以像调用函数那样处理事件吗？

原文由 Anyname Donotcare 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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()

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

显然，它的意义远不止于此，但这是我能给出的最好的基本总结。

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

原文由 Chris 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你想 调用 一个函数选项 2 和一些假设 5 应该工作。

如果您想实际 将 一个函数作为属性传递给某个子组件，以便它以后可以调用它（比如在某些事件上通知您的根元素），那么选项 1（使用预绑定）和选项 3（使用定义变量 const {handleAddTodo} = this 和预绑定 :) ) 应该工作

// this works if handleAddTodo was prebinded or doesn't use this
handleAddTodo ={this.handleAddTodo}

// this probably wont work unless handleAddTodo is higher order function that returns another function
handleAddTodo ={this.handleAddTodo()}

// This wont work unless you have a var/let/const that is referencing a function
handleAddTodo ={handleAddTodo}

// Same as 1
handleAddTodo ={this.handleAddTodo}

// 3 and 2 combined
handleAddTodo ={handleAddTodo()}

原文由 Yury Tarabanko 发布，翻译遵循 CC BY-SA 3.0 许可协议