Синтаксис JSX проп

Question

В JSX вы можете указывать реквизиты строковых литералов двумя способами:

<input id={'active_input'} /> 

и

<input id="active_input" /> 

Существует ли имя для каждого из этих синтаксисов?

Answer 1

<input id={'active_input'} /> - это синтаксис React.Вы можете передавать в основном все, что пожелаете: string, boolean, array и т. Д.

<input id="active_input" /> - это базовый синтаксис HTML.Он пропускает только строки, поэтому он не очень полезен, когда речь идет о пропуске различных реквизитов.

Answer 2

Я не могу найти официальный источник для следующего, но я бы сказал: <input id={'active_input'} /> - это строковый литерал внутри выражения JS, а <input id="active_input" /> - это строковый литерал.

Есть только (на мой взгляд) существенное различие между этими двумя понятиями: первое является HTML-неэкранированным, а второе - просто строковым литералом.

Таким образом, следующие значения не равны:

<MyComponent message="<3" />
<MyComponent message={'<3'} />

следующие значения равны:

<MyComponent message="&lt;3" />
<MyComponent message={'<3'} />

Источник: actjs.org