反应.js - 当从父级传播 .map 的结果时，此 .props.子对象

Question

我有一些奇怪的行为，当我从父母传播.map（）的结果时，这个.props.kids正在转换为一个对象。

例子：

const items = [
  { id: 1, name: "Name1" },
  { id: 2, name: "Name2" }
].map((item) => {
  return (
    <DropdownMenu_listItem key={item.id} item={item} />
  );
});

render() {
  return (
    <DropdownMenu
      label={'Some label'}
      onChange={() => {}}
    >
      {...items}
    </DropdownMenu>
  );
}

// DropdownMenu.js

render() {
  console.log(this.props.children); // {0: {…}, 1: {…}}

  return (
    // ...
  );
}

奇怪的是，当我省略. map（）并直接传递元素时，它们在this.props.children中显示为预期的数组：

render() {
  return (
    <DropdownMenu
      label={'Some label'}
      onChange={() => {}}
    >
      <DropdownMenu_listItem item={{...}} />
      <DropdownMenu_listItem item={{...}} />
    </DropdownMenu>
  );
}

// DropdownMenu.js

render() {
  console.log(this.props.children); // [{…}, {…}]

  return (
    // ...
  );
}

如果能深入了解为什么会发生这种情况，我们将不胜感激。

Answer 1

在我的情况下，作为attr将起作用

以前

function Foo(props) {
    return <Bar> {...props} </Bar>
}

之后

function Foo(props) {
    return <Bar {...props}> </Bar>
}

Answer 2

{… item}在DropdownMenu.js中作为子级传递。

它可以作为this.props.children

这个.props.子可以是数组或对象，这取决于你如何渲染子元素。

就你而言

<DropdownMenu
      label={'Some label'}
      onChange={() => {}}
    >
      {...items}
</DropdownMenu>

项是一个数组。正如我们所知

array is also type of object in javascript

with key equal to element's index and value is element itself

{… item}：这将作为对象传递，键作为元素索引，值等于数组元素。

要解决您的问题，您应该不使用spread运算符来传递它。

< code>{items}:这将作为数组传递。

<DropdownMenu
      label={'Some label'}
      onChange={() => {}}
    >
      {items}
</DropdownMenu>

Answer 3

这并不是因为地图，你得到的孩子作为对象，而是因为你使用的项目蔓延运营商

<DropdownMenu
          label={'Some label'}
          onChange={() => {}}
        >
          {...items} {/*spread operator here */}
</DropdownMenu>

既然map项目之后是一个使用{… item}的数组，因为您使用{}包装扩展运算符的结果，如果您编写{item}，那就可以了

 <DropdownMenu
      label={'Some label'}
      onChange={() => {}}
    >
      {items}
 </DropdownMenu>