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" />是基本的HTML语法。只能传递字符串，因此传递各种道具时并没有什么用。