React组件prop解构重命名、默认值及重定义无报错相关问题咨询

const myComp = ({propName1, propName2: myVar = false})=>{
    ...
    const propName2=true;
    ...
}

解构重命名默认值逻辑 #

你的理解是正确的，该写法属于ES6对象解构的标准语法：

• propName2: myVar 的作用是将props对象的propName2属性，重命名为局部变量myVar供组件内部使用
• 追加的= false是给该变量设置默认值：当父组件未传入propName2，或传入值为undefined时，myVar会默认赋值为false，否则优先使用传入的propName2值。

重定义propName2无报错的原因 #

该现象和React框架无关，由JavaScript原生语法规则决定：

• 组件参数解构时，你已经将propName2重命名为myVar引入函数作用域，propName2本身并不会作为变量被注册到当前作用域中，此时作用域内仅存在从props导入的propName1、myVar两个变量
• 后续代码中const propName2=true属于在当前作用域首次声明propName2变量，不存在重复声明冲突，属于合法的JS语法，因此不会抛出报错，React也不会额外拦截合法的JS语法执行。

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