如果 onClick 在 render() 函数中，为什么我们不能使用引号而不是大括号？

Question

我有一个扩展 React.Component 的 class 应用程序，在应用程序中有以下 render() 代码

 render() {return(
  <div style={styles}>
  <button type="submit" value="Go" onClick=" alert('Hi') ">Go</button>
  </div>
  )}

用大括号替换引号使代码有效

<button type="submit" value="Go" onClick={ alert('Hi') }>Go</button>

我知道在 React 中我们应该使用 { } 如果我们想添加 JavaScript 代码，但在这种情况下我们已经可以这样写 HTML onClick=" alert('Hi') "那为什么这不起作用？

Answer 1

出于安全/优化问题，不建议将 javascript 作为字符串传递。另外，如果 IDE 知道如何区分常规字符串和 JS 代码，开发体验会更好。

出于这些原因，React 不允许您那样使用它。

此外，请记住，JSX 不是 HTML。它是 XML 为 React 构建的，因此并非所有 HTML 标签、属性和嵌套都适用于 JSX 和 vice-versa。

Why can't we use quotation marks instead of curly brackets with onClick if it's inside a render() function?