我正在查看我的代码并注意到这一点(简化):
onClick={ () => {
console.log("foo");
} }
有 2 组花括号。第一对(外部)告诉 React 作为 JS 进行计算。第二对只是函数的 JS 表示法。 React 如何知道不评估第二对中的内容而是将其保留?
为了澄清,我认为这段代码应该在代码编译时打印 foo (没有单击按钮),然后由于不正确的函数符号而出错(因为我认为 React 应该运行第二对内部的代码而不是离开如果有意义的话,就单独讨论)。
最佳答案
您缺少的重要部分是 () =>
。
这告诉浏览器接下来是匿名函数声明。这称为“胖箭头”语法,或简称“箭头函数”
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
因为外面一对{}
里面的部分是函数定义(因为它以() =>
开头)console.log语句不会被运行直到有其他东西调用该函数。
在您的示例中,当用户单击最终由 React 呈现的 html 元素时,将调用该函数。
关于javascript - React 如何区分用于求值的大括号和用作 JS 的大括号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61052376/