为什么字符串 prop 在 JSX 元素中不需要大括号？答案

【问题标题】：Why doesn't a string prop need curly braces in a JSX element?为什么字符串 prop 在 JSX 元素中不需要大括号？
【发布时间】：2023-03-30 09:40:01
【问题描述】：

在 JSX 元素中，例如

<User name="Dave" age={34} />

我试图理解为什么一个字符串可以被引用但其他类型，例如数字或布尔值，必须用花括号括起来。我已经阅读了其他一些帖子，并且我知道花括号会评估一个表达式，然后将其作为道具传递 - 但我找不到字符串不必在花括号内的具体原因。

我应该只是接受它作为它的工作方式还是有更深层次的理由去理解？

【问题讨论】：

您可以在花括号中使用 string 也可以：<User name={'Dave'} age={34} />.
因为 JSX 就是这样定义的。 <User name="Dave" age={34} /> 变成 whatever(User, { name: "Dave", age: 34 }) - 由于 props（[X/HT]ML 属性）的值是字符串如此普遍，为什么需要大括号和引号？
这是 JSX 的语法。请注意，您也可以使用<User name={"Dave"} age={34} /> 或<User name={'Dave'} age={34} />
@norbitrial 谢谢，我知道您也可以将字符串放在花括号中，只是想知道为什么不必这样做。
@jonrsharp

标签： javascript reactjs jsx react-props

【解决方案1】：

真的很难准确地说出为什么某些代码会以特定方式出现，尤其是对于一个拥有如此多贡献者的大型项目，但也许我们可以做出一个很好的猜测。

2017 年，ReactJS 和 JSX 的创建者 Jordan Walke 被问及 “你是如何想到 React 的？” 他的回答涵盖了很多点，但只是简要列出了他的实际灵感对于 ReactJS...

*“我们自然想将 UI 部署到 Web 浏览器，而当时 compile-to-JS 环境还没有现在成熟——我什至不认为源映射存在......

最后回答你的问题：是的，React 受到许多其他技术的启发，包括我们当时使用的其他 UI 框架。最重要的是，React 受到了 ML 语言家族（包括 SML/OCaml）的启发，它帮助我阐明了不变性的价值（不是双关语）。（来源：Jordan Walke: Facebook Engineer | Creator of React.js & Reason.]

在 ReactJS 中，{} 大括号表示一个表达式，"" 引号表示一个字符串文字（来源：ReactJS.org: Introducing JSX。但为什么两者兼而有之？可能是为了使其灵活地使用通用的底层结构（HTML、XML ) 被各种 JavaScript UI 框架使用，这些框架通常使用 <element attribute="val" /> 形式的属性。但我只是在有限的信息下进行猜测。

【讨论】：