javascript - React 如何区分用于求值的大括号和用作 JS 的大括号?

标签 javascript reactjs

我正在查看我的代码并注意到这一点(简化):

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/

相关文章:

javascript - 使用 Express-Handlebars View 引擎在 Express 4.x 框架中呈现局部 View

javascript - 如何拆分模板文字?

reactjs - 选择未被调用的 renderValue 函数 [ReactJS/Material-UI]

javascript - 为什么我的 API 调用会收到重复的数据,而这些数据本应是随机的?

javascript - 如何正确地将 react 导入到 node-webkit 应用程序中?

javascript - `redux-loop` 和 `connected-react-router` 兼容吗?

asp.net - jQuery 验证将文本框限制为仅 dd/mm/yyyy

javascript - Angular Directive(指令)可以将参数传递给指令属性中指定的表达式中的函数吗?

javascript - 我可以使用 pactjs 来测试通过事件流和消息队列进行通信的微服务吗?

javascript - 使用 Microsoft Surface 触摸屏 Chrome 浏览器在 Google map 上捏合缩放问题