JSX prop语法

Question

在JSX中，您可以通过两种方式指定字符串文字属性：

<input id={'active_input'} /> 

和

<input id="active_input" /> 

每种语法都有名称吗？

Answer 1

我没有找到以下内容的权威来源，但我会说：<input id={'active_input'} />是JS表达式中的字符串文字，而<input id="active_input" />是字符串文字。

在我看来，两者之间只有一个显著的区别:第一个是未转义的HTML，而第二个只是一个字符串文字。

因此，以下内容并不相等：

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

以下是相等的：

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

来源：reactjs.org

Answer 2

<input id={'active_input'} />是一种React语法。基本上你可以传递任何你想要的东西，string，boolean，array等等。

<input id="active_input" />是一种基本的超文本标记语言语法。它仅限于传递字符串，所以当它传递各种属性时，它不是很有用。