请问有一个数组props，在react组件传递的时候会变为对象，请问如何接受为数组？

Question

请问下，比如有一个数组的props如下：

  const propsOfTabsWithDetailProps: TabsWithDetailProps = [
    {
      label:"label1", 
      children: <Button>sds</Button>,
      key: '1',
      breadcrumbs: ['001', '001-01', '001-01-01'],
      content: 'aaa'
    },
    {
      label:"label2", 
      children: <Button>sds</Button>,
      key: '2',
      breadcrumbs: ['002', '002-01', '002-01-01'],
      content: 'bbb'
    }
  ]

在传递的时候：

<TabsWithDetailComp {...propsOfTabsWithDetailProps}></TabsWithDetailComp>

---

但是当我在组件中接受的时候打印：

function TabsWithDetail(props: TabsWithDetailProps) {
  useEffect(()=> {
    console.log(props)
  }, [])
...

结果变成了一个对象：

{0: {…}, 1: {…}}

---

请问，如何才能接受数组props呢？

Answer 1

你自己打印组件是很么就清楚了，正常是没有办法，除非你能够改源码解析jsx

Answer 2

直接

<TabsWithDetailComp propsOfTabsWithDetailProps></TabsWithDetailComp>

你可能没理解...这个的作用 你可以百度看一下

Answer 3

直接

<TabsWithDetailComp propsOfTabsWithDetailProps={propsOfTabsWithDetailProps}></TabsWithDetailComp>

反正是自定义组件 解构干啥

Answer 4

你在向组件传递 props 时解构，解构后不就变成了以索引为 key 的对象了吗？

不解构传递的才是数组。