前端 - React 的props传递是否只能传递对象，而不能传递数组？

Question

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>

我在组件内接受的时候，会变成对象：

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

Answer 1

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

类似这样传数组

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

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

Answer 2

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

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

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

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

const treeData = props.treeData;

或者使用spread语法：

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

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