我是React的初学者,对于在React中调用函数有些困惑。
我看到了以下几种方法,但我不知道何时使用每种方法以及哪种方法。
handleAddTodo ={this.handleAddTodo}
handleAddTodo ={this.handleAddTodo()}
handleAddTodo ={handleAddTodo}
handleAddTodo ={handleAddTodo()}
这些可以互换吗?我可以通过调用函数的方式来处理事件吗?
这些可以互换吗?
简短答案:不可以。
让我们看看您发布的不同片段:
someFunction()
someFunction
使用前一种语法,您实际上是在调用该函数。后者只是对该功能的引用。那么我们什么时候使用哪个呢?
render() { myFunction() { return <p>Foo Bar</p>; } return ( <div> {myFunction()} </div> ); }
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> ); } }
this.someFunction()
这与功能的上下文有关。基本上,“此功能在哪里?”。是当前Component的一部分,然后使用this.someFunction(),是作为道具传入的父Component的一部分,然后使用this.props.someFunction()。它是当前方法内部的一个函数,然后只需使用即可someFunction()。
this.props.someFunction()
显然,还有更多的东西,但这是我能给出的最好的基本总结。
为了更好的理解,请 在这里 阅读。对于this关键字如何在Javascript中,特别是在React中如何工作,它是一个很好的指南。
this