能否使用扩展运算符解构简化React组件多层props处理逻辑？

现有代码问题说明 #

当前的嵌套问题根源是父组件传参时给每个属性额外包了一层对象，同时你写的现有解构逻辑是无效的：const {mainprops:{} = {}} = mainprops;不会生成可使用的变量，仅做了结构匹配，无法拿到实际值使用。

方案1：不修改父组件传参逻辑，简化子组件解构 #

单行参数解构（明确列出所有属性，性能最优） #

直接在组件入参处完成所有嵌套解构，同时内置默认值避免undefined报错：

const Navbar = ({ allprops: { mainprops: { mainprops: innerMainProps = {} } = {}, pageid: { pageId }, setpageid: { setPageId }, makerefresh: { makeRefresh } } = {} }) => {
  // 组件内部直接使用 innerMainProps、pageId、setPageId、makeRefresh 即可
}

批量处理属性（适合属性多不想逐个声明的场景） #

如果需要保留...userprops批量处理逻辑，用单行遍历即可完成：

const Navbar = ({ allprops = {} }) => {
  const [innerMainProps, userprops] = [allprops.mainprops?.mainprops ?? {}, Object.fromEntries(Object.entries(allprops).filter(([key]) => key !== 'mainprops').map(([key, val]) => [key, Object.values(val)[0]]))]
}

方案2：修改父组件传参逻辑，从根源消除嵌套（更推荐） #

你完全可以在传参阶段就避免不必要的嵌套，后续不需要任何额外解构处理，代码可维护性更高：
父组件修改后的传参代码：

const allprops = {
  mainprops, // 去掉额外的大括号，直接传变量本身
  pageid: pageId,
  setpageid: setPageId,
  makerefresh: makeRefresh
}
<Navbar allprops={allprops} />

此时子组件解构仅需一行：

const Navbar = ({ allprops: { mainprops = {}, ...userprops } = {} }) => {}

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