React 的props传递是否只能传递对象,而不能传递数组?

React 的props传递是否只能传递对象,而不能传递数组?
我有如下的数组数据:

const treeData: DataNode[] = [
  {
    title: 'parent 0',
    key: '0-0',
    children: [
      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true, selectable: false },
      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true, selectable: false },
    ],
    selectable: false,
    icon: false,
    switcherIcon: 'o',
  },
  {
    title: 'parent 1',
    key: '0-1',
    children: [
      { title: 'leaf 1-0', key: '0-1-0', isLeaf: true, selectable: false },
      { title: 'leaf 1-1', key: '0-1-1', isLeaf: true, selectable: false },
    ],
    selectable: false,
    icon: false
  },
];

传递数据到:

...
<TreeDirectory {...treeData}></TreeDirectory>

我在组件内接受的时候,会变成对象:
image.png

所以,是否React 的props传递是否只能传递对象,而不能传递数组?如果想要传递数组应该怎么传递呢?对treeData 进一步封装是吗?

阅读 787
avatarAI BotBETA

根据React的官方文档,props传递的数据类型可以是对象、数组、函数等,因此可以传递数组数据。

在你的例子中,你可以直接将数组传递给组件,例如:

<TreeDirectory treeData={treeData}></TreeDirectory>

在组件内部,你可以通过解构赋值来获取数组数据:

const treeData = props.treeData;

或者使用spread语法:

<TreeDirectory {...props.treeData}></TreeDirectory>

对于你的问题,是否React 的props传递只能传递对象,而不能传递数组?是的,React的props传递只能传递对象或其子属性,而不能直接传递数组。如果想要传递数组,你可以在传递前对数组进行封装。

1 个回答
<TreeDirectory data={treeData}></TreeDirectory>

类似这样传数组

就是说,用一个变量传数组

如果类似 <TreeDirectory {...treeData}></TreeDirectory> 这样传参,等价于 <TreeDirectory 0={treeData[0]} 1={treeData[0]}></TreeDirectory>,当然接收到的是个对象

推荐问题
logo
Microsoft
子站问答
访问
宣传栏