Почему мы не можем использовать кавычки вместо фигурных скобок с onClick, если он находится внутри функции render ()?

Question

У меня есть класс App, который расширяет React.Component, в 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. Это XML, созданный для React, поэтому не все HTML-теги, атрибуты и вложенность работают в JSX и наоборот.