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

Question

我有一个扩展React.Component的类App，在App中有以下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。它是为 React 构建的 XML，因此并非所有 HTML 标记、属性和嵌套都可以在 JSX 中使用，反之亦然。