reactjs - 在 React 中以这种方式将数据传递给属性有什么区别？

Question

我见过这些将数据传递给属性的方法:

 <Header headerText={'Authentication'} />     

 <Header headerText="Authentication" /> 

它们有什么区别？

Answer 1

如果您想将 string 作为 prop 传递，则可以用 '' 或 "" 将其括起来。

如果你想传递一个对象、 bool 值、整数、 float 、变量等，那么你可以使用大括号{}

示例:

<Header headerText={'Authentication'} />  

 <Header headerText={"Authentication"} />   

 <Header headerText="Authentication" />

<Header headerText='Authentication' />

以上所有内容都被视为字符串。

如果您想传递任何其他类型作为 props，那么您可以使用 {}

示例:

将变量作为属性传递

const auth = Authentication
<Header headerText={auth} />

将 bool 值作为属性传递

<Header headerText={false} />
<Header headerText={true} />

传递整数或 float 作为属性

<Header headerText={1} />
<Header headerText={1.0} />