React.js - this.props.children 从父级传播 .map 结果时的对象

Question

当我从父级传播

this.props.children

的结果时，我遇到了一些奇怪的行为，其中

.map()

正在转换为对象。

示例：

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

这不是因为地图让您将子对象作为对象，而是因为您对

中的项目使用了扩展运算符

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

现在，map items 之后是一个数组，使用

{...items }

使其成为一个对象，因为你用

{}

包装了展开运算符的结果，如果你写

{items}

，那就没问题了

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

Answer 2

{...items}

在

DropdownMenu.js

中作为子级传递。

它可用作

this.props.children

this.props.children

可以是数组或对象，具体取决于您渲染子元素的方式。

就你而言

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

items 是一个数组。据我们所知

array is also type of object in javascript

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

{...items}

：这将作为一个对象传递，其中键作为元素索引，值等于数组元素。

要解决您的问题，您应该在不使用扩展运算符的情况下通过它。

{items}

：这将作为数组传递。

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

Answer 3

在我的例子中，作为 attr 传递会起作用

之前

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

之后

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

Answer 4

Может кому пригодиться。 Вот таким способом сработало четко

InputProps={{...params.InputProps, endAdornment: <>{params.InputProps.endAdornment}{endAdornment}</>}}