一个奇怪的js语法格式问题

Question

return <span {...{attrs: attributes}}>{children}</span>

这种是什么写法？第一次看见，我把他输出来，里面长这样

Answer 1

JSX 可以看下 React 官网的文档 JSX 简介

{...{attrs: attributes}} 这个相当于把 attrs 对象展开了

{children} 的话调用这个子组件的时候可以往里传东西，比如传个 button 的话，最后就是 span 套 button 了

好像还有 typescript，attributes是个 interface，对 attrs 进行了定义

Answer 2

... 符号是 JavaScript 中的 展开语法

JSX 这里的写法就是把一个对象里的所有键-值（key: value）展开作为组件的属性名-属性值（attr=value）。目的是为了写起来方便。