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

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 中工作，反之亦然。