我使用在线Babel REPL将以下JSX转换为JavaScript：
JSX：
function Button({children, ...rest }) {
return (
<button {...rest}>
{children}
</button>
)
}JavaScript输出：
function Button({ children, ...rest }) {
return React.createElement("button", rest, children);
}在JavaScript中，我传递给JSX中button元素的{...rest}只是作为对象参数传递给createElement函数。如果我使用{rest}而不是{...rest}，为什么它是一个无效的表达式？
无效的JSX：
function Button({children, ...rest }) {
return (
<button {rest}>
{children}
</button>
)
}1.在函数声明中的对象解构中，我已经将除children之外的所有属性收集到rest对象中，并且每个javascript对象在JSX中都是有效的表达式，不是吗？那么，是什么迫使我们在JSX中的<button>元素中使用{...rest}呢？
1.我的第二个问题是：当我们在JavaScript中对对象使用spread操作符时，它使用冒号作为键和值之间的分隔符来扩展对象的键值对。但是，当我们在JSX元素中使用spread操作符时，在生成的HTML中，如何使用=作为键和值之间的分隔符来扩展键值对？
1条答案
按热度按时间hlswsv351#
如果我使用{rest}而不是{... rest}，为什么它是一个无效的表达式？
因为这在JSX中是不支持的。您只能以下列方式使用花括号：
<div>{expression} static text</div>=符号之后，例如<div className={dynamicClass}></div>注意，对于最后一个用例，语法必须是
<ComponentName {...object}>参见：
https://react.dev/learn/javascript-in-jsx-with-curly-braces#where-to-use-curly-braceshttps://react.dev/learn/passing-props-to-a-component#forwarding-props-with-the-jsx-spread-syntax
当我们在JavaScript中对对象使用spread操作符时，它使用冒号作为键和值之间的分隔符来扩展对象的键值对
不，冒号只是在对象文字中使用，与对象的内部表示无关。说扩展语法与冒号作为分隔符有关是不准确的。
但是，当我们在JSX元素中使用spread操作符时，在生成的HTML中，如何使用=作为键和值之间的分隔符来扩展键值对？
这里的前提是基于一种误解。Spread语法与JSX转发props的语法完全不同。它们看起来相似，但功能不同。通过编译代码，您已经可以看到转发prop可以转换为对
React.createElement的调用。事实上，所有JSX都可以转译为React.createElement的嵌套调用。