如何解构带短横线的Aria属性？正确语法探究

解构带短横线的props完全可行，但需要遵循正确的语法规则：用引号包裹带短横线的属性名，并同步重命名为合法的标识符（JavaScript/TypeScript不允许变量名包含短横线）。

你的两种写法为何报错 #

• 直接写aria-label时，JS会将其解析为aria - label（变量aria减变量label的表达式），导致逗号左侧变成无意义的无效运算，因此TypeScript抛出TS2695错误。
• 仅给属性名加引号但未重命名时，ESLint报错是因为解构语法中，使用字符串字面量作为属性名时，必须通过:指定对应的变量名，否则不符合语法规范。

正确写法示例 #

const { destination, label, 'aria-label': ariaLabel, ...blockProps } = props;

这段代码会将props中的aria-label属性值提取出来，赋值给合法变量ariaLabel，同时剩余属性会被收集到blockProps中，完全符合语法要求，不会触发TS或ESLint错误。

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