React为何在使用的时候传入props，这里会多出一层呢？

Question

我创建了一个React组件：

export type TabsWithCrumbPropsType = {
  label: string, 
  breadcrumbs: string[],  
  children: React.ReactNode,
  closable?: boolean
}[]

function TabsWithCrumb(props: TabsWithCrumbPropsType) {
...
}

但是当我在使用的时候传递数据的时候：

import { TabsWithCrumbPropsType } from './components/TabsWithCrumbs'

const defaultProps:TabsWithCrumbPropsType = [{
  label: '001',
  breadcrumbs: ['01', '02', '03'],
  children: <button>001</button>,
  closable: true 
  },
  {
    label: '002',
    breadcrumbs: ['01', '02', '04'],
    children: <button>002</button>
  }
]

<TabsWithCrumbs props={defaultProps}></TabsWithCrumbs>

报错：

我在组件中打印接受到的参数props，结果为：

感觉多了几层。

Answer 1

把 function TabsWithCrumb(props: TabsWithCrumbPropsType) 改为 function TabsWithCrumb({ props }: { props: TabsWithCrumbPropsType })

Answer 2

定props：

type TabsWithCrumbProps = {
  data: TabsWithCrumbPropsType
};

function TabsWithCrumb(props: TabsWithCrumbProps) {
  // 在组件里用 props.data 
  ...
}

组件里：

function TabsWithCrumb(props: TabsWithCrumbProps) {
  console.log(props.data);  
  ...
}