React与TypeScript中组件标签内{...props}语法含义咨询

标签内的{...props}是什么？ #

这是React结合JSX的对象展开语法，作用是把一个包含多个属性的props对象，一次性拆解成多个单独的属性传递给子组件。

举个例子，如果你的props是{ age: 28, hobby: 'coding' }，写<MyList {...props}>就完全等价于：

<MyList age={28} hobby="coding" />

和你手动写name_prop={this.props.name}这种单独传递属性的逻辑一致，只是它能批量处理多个属性，省去逐一书写的麻烦。

如果和单独传递的属性混用（比如<MyList name_prop={this.props.name} {...props}>），注意优先级：如果props对象里也包含name_prop，那么展开语法里的属性会覆盖前面显式传递的同名属性——因为JSX中后写的属性会覆盖先写的。

放在标签内和外的区别 #

• 标签内部（如<MyList {...props}>）：这是React的属性传递语法，所有展开的属性会作为子组件的props被接收，不会在页面上渲染任何可见内容，子组件可以通过props.属性名来读取这些值。
• 标签外部（如{...props}）：这是直接在JSX的文本区域执行表达式，由于对象展开后无法直接转换成可渲染的文本，最终页面上会显示[object Object]，这属于错误用法，除非你特意要把props对象转成字符串展示（通常没人这么做）。

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