前端 - 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

定props：

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

组件里：

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

Answer 2

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