Soy nuevo en la programación y no sé cuál es el mejor enfoque aquí. Hice una StudentCard y tengo el mapeo en este componente así:
<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>Ahora quiero que el Avatar esté separado de esto, así que hice otro componente secundario como:
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> ) }Aquí está mi problema: necesito pasar el binderMembership que se me otorga mediante la asignación en el componente principal, pero lo necesito en el componente secundario. ¿Cómo puedo pasarlo como accesorios ya que es solo un elemento de elementos y es solo un nombre?
En primer lugar, se olvidó de cerrar las etiquetas de mapeo. Después de </li> debería tener )} .
En segundo lugar, puede pasar accesorios a componentes anidados o ponerlos más arriba, lo cual es fácil de hacer. Desea pasar a anidado, por lo que debe declarar esto en su componente. No sé si tiene un componente de clase/funcional, una función clásica o una flecha. Pero debería verse así:
function NameOfFunction ({ol}) { }
Envié accesorios porque es más fácil de usar.
El tercero es usar el valor en algún lugar que desee usando handlebars {} ie {props.id} .
Y eso es todo.