我可以使用数组项的映射作为其他组件的道具吗？答案

【问题标题】：Can I use map of an arrays item as props for other components?我可以使用数组项的映射作为其他组件的道具吗？
【发布时间】：2022-07-18 22:53:57
【问题描述】：

我是编程新手，我不知道这里最好的方法是什么。我制作了一张 StudentCard，我在这个组件中有这样的映射：

<ul className="-my-5 divide-y divide-slate-200">
      {props.binderMemberships.map((binderMembership) => (
    <li key={binderMembership.id} className="py-4">
       <div className="flex items-center space-x-4">
             <div className="flex-shrink-0">
                 <Avatar of={binderMembership.binder.student} size="8" />
             </div>
       </div>
    </li>
</ul>

现在我希望 Avatar 与此分开，所以我制作了另一个子组件，例如：

import Avatar from "./Avatar"
import type { Binder, BinderMember, User } from "@prisma/client"
export interface AvatarLoaderProps {
    binderMemberships: (BinderMember & { binder: Binder & { student: User } })[]
    user: User
}
export function AvatarLoader(props: AvatarLoaderProps) {
    return (
      <div className="flex-shrink-0">
          <Avatar of={props.binderMemberships.binder.student} size="8" />
      </div>
    )
}

这是我的问题：我需要传递通过在父组件中映射给我的 binderMembership，但我需要在子组件中使用它。我怎么能把它作为道具传递，因为它只是一个项目，只是一个名字？

【问题讨论】：

你能告诉我这个map of an arrays item是什么吗？
确定你为什么不能？只需妥善处理道具。但通常在将组件映射传递给另一个组件时，您将它们作为子组件传递，这将始终可通过 props.children
@mstephen19 我应该如何处理？在这种情况下，我需要 bindermembership 而不是作为主数组的 bindermemberships。我需要传递项目的项目。
@Bravo 它是一个对象数组，例如 {id: 49, binderId: 12, userId: 2, creatorId: 9, createdAt: '2022-04-06T19:38:38.0} 每个对象都有另一个里面的对象。我需要将这些项目中的一项作为道具传递
所以，你刚刚描述了一个对象数组 - 但是，我问你是什么意思 map of an arrays item - 没关系，我知道你的意思是项目而不是项目跨度>

标签： javascript reactjs remix.run

【解决方案1】：

首先，你忘了关闭映射的标签。在</li> 之后应该有)}。

其次，你可以将 props 传递给嵌套组件或将其放在更高的位置，这很简单。你想传递给嵌套，所以它必须在你的组件中声明它。我不知道您是否有类/功能组件、经典功能或箭头。但它应该是这样的：

function NameOfFunction ({ol}) { }

我派出了道具，因为它更容易使用。

第三个是使用把手{}，即{props.id}，在你想要的地方使用值。

仅此而已。

【讨论】：