JSX中扩展运算符的必要性及HTML属性等号分隔原理

转译示例 #

我使用Babel将以下JSX代码转译为JavaScript：

JSX代码：

function Button({children, ...rest }) {
  return (
    <button {...rest}>
      {children}
    </button>
  )
}

转译后的JavaScript代码：

function Button({ children, ...rest }) {
  return React.createElement("button", rest, children);
}

在转译后的代码中，JSX里传递给<button>的{...rest}被直接作为对象参数传给React.createElement函数。但如果改用{rest}替代{...rest}，会成为无效表达式，无效代码如下：

无效JSX代码：

function Button({children, ...rest }) {
  return (
    <button {rest}>
      {children}
    </button>
  )
}

问题1：为什么<button>元素中必须使用{...rest}而非{rest}？ #

虽然rest是合法的JavaScript对象，但JSX的属性写法有明确规则：

• JSX元素的属性要么是静态格式（比如className="btn"），要么是{表达式}对应单个属性值（比如onClick={handleClick}），必须明确对应“键-值”关系。
• 直接写{rest}相当于把整个对象作为一个无键名的属性传递，这完全不符合JSX的语法规范，会直接报错。
• 而{...rest}是JSX专门提供的扩展属性语法，作用是把rest对象里的所有键值对“拆解开”，逐个作为独立属性传给<button>元素——比如rest包含className="btn"和onClick={handleClick}，用{...rest}就等价于写className="btn" onClick={handleClick}，这刚好匹配React.createElement对第二个props参数的要求，所以转译后能直接将rest作为参数传入。

问题2：为什么JSX里用扩展运算符后，生成的HTML键值对是等号分隔？ #

这是两个不同语法层面的规则差异导致的：

• JavaScript对象用冒号分隔键值，是编程语言层面的语法要求，...rest在JSX里只是告诉React要把该对象的所有键值对作为组件props传递。
• 而React最终会把这些props渲染成真实的HTML元素，HTML的属性规则就是用等号分隔键和值（比如class="btn"），这是标记语言层面的标准，和JavaScript的写法无关。
• 简单来说，JSX的扩展语法是用于给React传递数据的，最终渲染成HTML时必须遵循HTML的规范，所以会变成等号分隔的形式。

内容的提问来源于stack exchange，提问作者AllSolutions