React：调用函数，为什么第一个起作用而第二个不起作用？

Question

也许这是一个愚蠢的问题，但我想知道为什么会这样...

const isDisabled = () => 
  // condition check

这个有效：

<button
  type="button"
  disabled={this.isDisabled()}
>
  Let Me In
</button>

但这不起作用：

<button
   type="button"
   disabled={this.isDisabled}
>
  Let Me In
</button>

Answer 1

因为disabled需要是一个布尔值：

Answer 2

当你添加像this.isDisabled()这样的括号时，函数被执行并且return值被分配给按钮的disabled属性。当您只是说 disabled = this.isDisabled 时，您只是传递函数的引用，因此不会计算值。

还要记住，按钮上的禁用属性是一个布尔值。因此，请检查您从函数 return 得到的值。

Answer 3

在第一个例子中 this.isDisabled() 你调用函数。
在带有 this.isDisabled 的第二个示例中，您无需调用即可传递函数引用。

试着console.log()他们两个看看区别。
第二个就像变量一样工作。例如：

var myFunction = this.isDisabled; // I've put the reference to myFunction
myFunction(); // now I've called isDisabled()

React: Calling functions, why the first one works and not the second one?