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（）这样的括号时，将执行该函数，并将返回值分配给按钮的Disabled属性。当您仅说disabled = this.isDisabled时，您只是在传递函数的引用，因此该值不会被评估。

Answer 3

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

Answer 4

因为您可能忘记了this.isDisabled结尾处的括号？