我可以将阵列项目的地图用作其他组件的道具吗？

Question

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

<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>

现在我希望化身与此分开，所以我制作了另一个孩子的组成部分，例如：

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通过在父组件中映射，但我需要在子组件中。我该如何将其作为道具传递，因为它只是一件项目，而只是一个名字？

Answer 1

首先，您忘了关闭映射标签。 ＆lt;/li＆gt;之后，它应该具有）}。

其次，您可以将道具传递给嵌套组件或将其放置更高，这很容易做到。您想传递到嵌套，因此必须将其声明在您的组件中。我不知道您是否有类/功能组件，经典功能或箭头。但是它应该像这样：

函数名称函数（{ol}）{}

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

第三是使用想要使用车把{} ie {props.id}的值。

仅此而已。