Skip to main content

JSX和HTML格式互换

非常好的问题！下面我将准确描述我刚刚是怎么把你的 JSX 代码改写成 HTML 的，并详细说明 HTML 和 JSX 风格之间是如何互换的，帮助你掌握这两个常见前端开发风格之间的转换逻辑。

✅ 一、我刚刚是怎么改写的？​

原始格式（JSX 内联样式）：​

<div style={{
  display: 'flex',
  marginBottom: '15px',
  maxWidth: '100%',
  flexDirection: 'row',
  justifyContent: 'flex-start'
}}>

改写后的格式（HTML 内联样式）：​

<div style="display: flex; margin-bottom: 15px; max-width: 100%; flex-direction: row; justify-content: flex-start;">

🔄 二、JSX 与 HTML 内联样式的区别和互换规则​

特性JSX 样式对象（React/JSX）HTML 内联样式
语法结构使用 JavaScript 对象 {}使用字符串 "..."
属性名使用驼峰命名法 marginBottom, flexDirection使用短横线命名法 margin-bottom, flex-direction
属性值可以使用变量、表达式、字符串等必须是字符串，不能用 JS 表达式
分隔符属性之间用逗号 , 分隔属性之间用分号 ; 分隔
引号每个值可以加单引号或不加不需要引号（除非特殊场景）

🔁 三、完整的转换步骤（从 JSX 到 HTML）​

我们以你这段 JSX 中的某个 style 属性为例：

JSX 原始写法：​

<img
  src="https://pic.qqans.com/up/2024-6/17174598316517301.jpg"
  alt="avatar"
  style={{
    width: '40px',
    height: '40px',
    borderRadius: '50%',
    margin: '0 10px',
    objectFit: 'cover',
    flexShrink: 0
  }}
/>

转换成 HTML 后的样子：​

<img
  src="https://pic.qqans.com/up/2024-6/17174598316517301.jpg"
  alt="avatar"
  style="width: 40px; height: 40px; border-radius: 50%; margin: 0 10px; object-fit: cover; flex-shrink: 0;"
/>

转换过程详解：​

  1. 去掉双大括号 {{}}：JSX 中用 style={{...}} 是为了传入一个对象，而 HTML 中直接是字符串。
  2. 属性名从驼峰转为短横线形式：
    • borderRadius → border-radius
    • flexShrink → flex-shrink
  3. 属性值去引号：
    • '40px' → 40px
    • 'cover' → cover
  4. 属性之间用分号分隔：
    • 用 ; 替代 ,
  5. 整个样式写在双引号中：
    • style="..."

📌 四、补充说明：为什么你之前的写法失效了？​

你之前尝试写成这样：

<div style="
  display: 'flex',
  marginBottom: '15px',
  ...
">

这是错误的原因有几点：

  1. 你在 HTML 的 style 属性里用了 JSX 的对象语法。
  2. 用了单引号包裹值：HTML 的内联样式不支持这种写法。
  3. 用逗号分隔 CSS 属性：HTML 应该用分号 ; 分隔。

🧠 五、总结一句话​

在 JSX 中，style={{ ... }} 是一个 JavaScript 对象，而在 HTML 中，style="..." 是一段标准的 CSS 字符串，两者必须按照各自的语法规则来书写。

🧪 六、小练习：互相转换​

JSX:​

<div style={{ color: 'red', fontSize: '14px', marginLeft: '10px' }}>Hello</div>

对应 HTML:​

<div style="color: red; font-size: 14px; margin-left: 10px;">Hello</div>

如果你还有关于 React、Vue、HTML 或 Markdown 渲染的问题，欢迎继续提问，我可以一步步带你深入理解这些前端基础概念。