리액트 렌더 소품
¿ Que son las render props en React?
Las render props son un técnica que nos permiten compartir codigo en React al hacer uso de un propiedad que tiene como valor una función.
Un componente con una
render prop
recibe una función que retorna un elemento react.
<Data render={(user) => <UserData user={user} />} />
En React podríamos decir que hay varias maneras de compartir código entre componentes, siendo estos componentes los elementos principales de reutilización de código en React.
También es cierto que no siempre tenemos claro como podríamos compartir estados, comportamientos, que un componente encapsula, con otros componentes que necesiten esos datos.
Digamos que tenemos un componente que simplemente encapsula los datos de un usuario.
function UserData() {
const user = {
name: "Alfredo",
lastName: "Moscoso",
rol: "Frontend Developer",
};
return (
//user...
);
}
Ahora supongamos que queremos mostrar estos datos como una
table
.Aquí nos preguntamos, ¿Como podríamos compartir esos datos con otros componentes?
Creamos un componente que renderice un
table
y acepte unprop
사용자.function Table({ user }) {
return (
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Rol</th>
</tr>
</thead>
<tbody>
<tr>
<td>{user.name}</td>
<td>{user.lastName}</td>
<td>{user.rol}</td>
</tr>
</tbody>
</table>
</div>
);
}
Refactorizamos nuestro componente
<UserData />
para que renderice el componente <Table />
.function UserData() {
const user = {
name: "Alfredo",
lastName: "Moscoso",
rol: "Frontend Developer",
};
return (
<Table user={user}/>
);
}
Pero ahora también queremos mostrar esos datos mediante un componente
<Card />
en otro lugar de nuestra App, entonces podríamos pasar esos datos a <Card user={user} />
Tendríamos que crear por ejemplo otro componente
UserDataCard
, para mostrar una salida diferente o transmitter los datos desde un contexto global.function UserDataCard() {
const user = {
name: "Alfredo",
lastName: "Moscoso",
rol: "Frontend Developer",
};
return (
<Card user={user}/>
);
}
Esto funciona pero el objetivo de encapsular datos, hacerlos portables y reutilizables no se ha logrado.
En este caso podemos recurrir al uso de render props, ya que esta técnica nos permite encapsular y hacer portables datos o comportamientos que queramos compartir entre componentes.
En el componente
<UserData />
encapsularíamos nuestros datos y le proporcionaríamos una función por medio de props
para que 결정 que renderizar de forma dinámica.function UserData({ render }) {
const user = {
name: "Alfredo",
lastName: "Moscoso",
rol: "Frontend Developer",
};
return (
<div>
<h1>User Data</h1>
//renderiza una salida dinámicamente
{render(user)}
</div>
);
}
En algún lugar de nuestra App donde necesitemos mostrar esos datos como un
table
llamaríamos a nuestro componente de la siguiente manera:<UserData render={(user) => <Table user={user} />} />
O si necesitamos renderizar una
<Card>
...<UserData render={(user) => <Card user={user} />} />
Como puedes ver, esta técnica hace a nuestros componentes muy portátiles y reutilizables.
Recuerda que esta es otra técnica mas que podemos usar en React, y tal vez no se adapte a tus requerimientos al desarrollar una aplicación o una web, pero es importante conocer diferentes patrones que nos ayuden a decidir cual es el mejor para nuestro caso de uso .
Tu feedback es de ayuda para mi 🙏
코넥테모스 😎
¡Nos vemos pronto! 👊
Reference
이 문제에 관하여(리액트 렌더 소품), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jairdev/react-render-props-1m7k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)