我是 React 的初学者,对于在 React 中调用函数有点困惑。
我看到了以下方法,但我不知道何时使用每种方法以及哪种方法。
handleAddTodo ={this.handleAddTodo}
handleAddTodo ={this.handleAddTodo()}
handleAddTodo ={handleAddTodo}
handleAddTodo ={this.handleAddTodo}
handleAddTodo ={handleAddTodo()}
这些可以互换吗?我可以像调用函数一样处理事件吗?
最佳答案
Are these interchangeable?
简短回答:否。
<小时/>让我们看一下您发布的不同片段:
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()
,如果是作为 props 传入的父 Component 的一部分,则使用 this.props.someFunction()
。它是当前方法内的函数,那么只需使用 someFunction()
。
显然,还有很多内容,但这是我能给出的最好的基本总结。
为了更好地理解,请阅读 here 。这是关于 this
关键字如何在 Javascript 尤其是 React 中工作的很好的指南。
关于javascript - 在 React 中调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45099748/