React JSX属性传递规则（事件处理函数名必须用驼峰式；内联样式必须是JavaScript对象，键名用驼峰命名；className、htmlFor；自定义属性要以data-开头、动态属性绑定）

在 JSX 中，属性传递遵循以下特定规则，这些规则确保了代码的可读性和与 React 的兼容性：

---

1. 驼峰式命名法（CamelCase）

• 规则：JSX 的属性名必须使用 驼峰式命名法（CamelCase），而不是 HTML 中的短横线命名法。
• 原因：JSX 最终会被编译为 JavaScript，而 JavaScript 的变量命名规则不允许短横线（-）或保留字（如 class）。
• 示例：

  // 正确：使用驼峰式命名
  <div className="container" style={{ color: 'red' }} />
  
  // 错误：使用短横线命名
  <div class="container" style-color="red" />
  

---

2. 属性值的类型

- 字符串属性：直接使用双引号包裹的字符串。

<h1 title="欢迎">标题</h1>

- 表达式属性：使用 {} 包裹 JavaScript 表达式，动态计算属性值。

const isActive = true;
<button className={isActive ? 'active' : 'inactive'}>按钮</button>

- 布尔属性：如果属性值为 true，可以直接省略值；如果为 false，则不传递该属性。

<input disabled />  // 等价于 
<input disabled={false} />  // 不显示 disabled 属性

---

3. 事件处理

- 规则：事件处理函数的命名必须使用驼峰式（如 onClick），而不是 HTML 中的全小写（如 onclick）。

- 示例：

<button onClick={() => console.log('点击')}>点击我</button>

---

4. 内联样式（Style）

- 规则：内联样式必须是一个 JavaScript 对象，键名使用驼峰式命名。

- 示例：

<div style={{ color: 'blue', fontSize: '16px' }}>样式文本</div>

---

5. 特殊属性

- className 替代 class：

<div className="container">内容</div>

- htmlFor 替代 for（用于 标签）：

<label htmlFor="username">用户名</label>
<input id="username" />

---

6. 自定义属性

- 规则：自定义属性需要以 data- 开头（符合 HTML5 标准），但可以通过 {} 传递任意值。

<div data-user-id={123}>用户信息</div>

---

7. 布尔属性的隐式处理

- 如果属性值为 true，可以省略值直接写属性名；如果为 false，则不传递该属性。

<input required />       // 等价于 
<input required={false} /> // 不显示 required 属性

---

8. 动态属性绑定

- 可以通过 {} 绑定动态属性值，例如状态变量或计算结果。

const isActive = true;
<button disabled={!isActive}>按钮</button>

---

总结

JSX 中的属性传递规则本质上是 将 HTML 的语法规则转换为 JavaScript 的语法糖，目的是为了与 React 的声明式编程模型兼容。通过遵循这些规则，开发者可以更高效地构建动态、可维护的 React 组件。

在以下示例代码中：

// 字符串属性
<div className="container">内容</div>

// 表达式属性
<button 
  className={className} 
  onClick={() => console.log('点击')}
  disabled={!isActive}
>
  按钮文字
</button>

这些规则都被严格遵循，例如：

• className 使用驼峰式命名替代 class。
• onClick 和 disabled 通过 {} 绑定动态值或函数。
• 内联样式（如 style）未直接使用，但规则同样适用。