React 的 JSX 语法中，引号和大括号有不同的用途

在 React 的 JSX 语法中，引号和大括号有不同的用途，它们决定了属性值的类型和动态性。以下是详细解释和对比：

1. 引号 " "：传递静态字符串

<Greeting name="okk" age="19" />

• 作用：直接传递字符串值。
• 特点：
  • 所有用引号包裹的值都会被解析为 字符串。
  • 例如 age="19" 中的 19 是字符串类型，等同于 age={"19"}。
• 适用场景：简单静态字符串（如固定文案、类名）。

2. 大括号 { }：嵌入 JavaScript 表达式

<Greeting name={"honh"} age={18} />

• 作用：包裹 JavaScript 表达式（变量、数字、对象、函数等）。
• 特点：
  • {18} 中的 18 是 数字类型，{"honh"} 是字符串（与大括号外的引号等效）。
  • 可以传递复杂对象或动态值：

    <User info={{ name: "honh", age: 20 }} />
    

• 适用场景：
  • 非字符串类型（数字、布尔值、对象、数组）。
  • 动态变量或表达式（如 age={userAge}）。
  • 函数调用（如 onClick={() => handleClick()}）。

3. 对比你的代码

<Greeting name={"honh"} age="19" />  // name 是字符串，age 是字符串 "19"
<Greeting name="okk" age={18} />     // name 是字符串，age 是数字 18

• 关键差异：
  • age="19" 传递的是字符串，而 age={18} 传递的是数字。
  • 如果组件期望 age 是数字类型，age="19" 可能导致逻辑错误（需用 age={19}）。

4. 最佳实践

• 统一风格：优先使用引号传递字符串，大括号传递非字符串：

  <Greeting name="honh" age={19} />
  

• 注意类型：确保属性类型与组件期望的类型一致（如 age 是数字还是字符串）。
• 动态内容：需要计算或变量时，必须用大括号：

  <div className={isActive ? "active" : "inactive"}>
    {items.map(item => <span key={item.id}>{item.name}</span>)}
  </div>
  

常见错误示例

<Greeting age="18" />     // 传递字符串 "18"，而非数字 18
<Button disabled="true" /> // 错误！应写为 disabled={true}（布尔值需用大括号）

掌握引号和大括号的区别，能让你更精准地控制数据类型的传递和动态渲染逻辑。