Descubra cómo Render Props puede ayudarlo a crear una aplicación React
Un patrón común que se utiliza para compartir el estado entre componentes es utilizar elchildren
apuntalar.
Dentro de un componente JSX puede renderizar{this.props.children}
que inyecta automáticamente cualquier JSX pasado en el componente principal como hijo:
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {
/*...*/
}
}
render() {
return <div>{this.props.children}</div>
}
}
const Children1 = () => {}
const Children2 = () => {}
const App = () => (
<Parent>
<Children1 />
<Children2 />
</Parent>
)
Sin embargo, aquí hay un problema: los hijos no pueden acceder al estado del componente principal.
Para poder compartir el estado, necesita usar un componente de apoyo de renderizado, y en lugar de pasar componentes como hijos del componente principal, pasa una función que luego ejecuta en{this.props.children()}
. La función puede aceptar argumentos,:
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = { name: 'Flavio' }
}
render() {
return <div>{this.props.children(this.state.name)}</div>
}
}
const Children1 = props => {
return <p>{props.name}</p>
}
const App = () => <Parent>{name => <Children1 name={name} />}</Parent>
En lugar de utilizar elchildren
prop, que tiene un significado muy específico, puede usar cualquier prop, por lo que puede usar este patrón varias veces en el mismo componente:
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = { name: 'Flavio', age: 35 }
}
render() {
return (
<div>
<p>Test</p>
{this.props.someprop1(this.state.name)}
{this.props.someprop2(this.state.age)}
</div>
)
}
}
const Children1 = props => {
return <p>{props.name}</p>
}
const Children2 = props => {
return <p>{props.age}</p>
}
const App = () => (
<Parent
someprop1={name => <Children1 name={name} />}
someprop2={age => <Children2 age={age} />}
/>
)
ReactDOM.render(<App />, document.getElementById(‘app’))
Descarga mi gratisReact Handbook
Más tutoriales de react:
- Un ejemplo de aplicación simple de React: obtenga información de los usuarios de GitHub a través de la API
- Construye un contador simple con React
- Configuración de VS Code para el desarrollo de React
- Cómo pasar accesorios a un componente secundario a través de React Router
- Crea una aplicación con Electron y React
- Tutorial: crea una hoja de cálculo usando React
- La hoja de ruta para aprender React
- Aprenda a usar Redux
- Empezando con JSX
- Componentes con estilo
- Introducción a Redux Saga
- Introducción a React Router
- Introducción a React
- Reaccionar componentes
- El DOM virtual
- Reaccionar eventos
- El estado de reacción
- Reaccionar apoyos
- El fragmento de reacción
- La API React Context
- Reaccionar PropTypes
- Reaccionar conceptos: declarativo
- Reaccionar: Cómo mostrar un componente diferente al hacer clic
- Cómo hacer un bucle dentro de React JSX
- Props vs State en React
- ¿Deberías usar jQuery o React?
- ¿Cuánto JavaScript necesitas saber para usar React?
- Introducción a Gatsby
- Cómo hacer referencia a un elemento DOM en React
- Flujo de datos unidireccional en React
- Reaccionar componentes de orden superior
- Reaccionar eventos del ciclo de vida
- Concepto de reacción: inmutabilidad
- Concepto de reacción: Pureza
- Introducción a React Hooks
- Introducción a create-react-app
- Concepto de reacción: Composición
- Reaccionar: componentes de presentación frente a contenedores
- División de código en React
- Representación del lado del servidor con React
- Cómo instalar React
- CSS en React
- Usando SASS en React
- Manejo de formularios en React
- Reaccionar StrictMode
- Reaccionar portales
- Reaccionar accesorios de renderizado
- Prueba de componentes de React
- Cómo pasar un parámetro a los controladores de eventos en React
- Cómo manejar errores en React
- Cómo devolver múltiples elementos en JSX
- Representación condicional en React
- React, cómo transferir accesorios a componentes secundarios
- Cómo obtener el valor de un elemento de entrada en React
- Cómo utilizar el gancho useState React
- Cómo usar el gancho useCallback React
- Cómo utilizar el gancho useEffect React
- Cómo utilizar el gancho useMemo React
- Cómo utilizar el gancho useRef React
- Cómo usar el gancho useContext React
- Cómo utilizar el gancho useReducer React
- Cómo conectar su aplicación React a un backend en el mismo origen
- El tutorial de Reach Router
- Cómo utilizar las herramientas de desarrollo de React
- Cómo aprender React
- Cómo depurar una aplicación React
- Cómo renderizar HTML en React
- Cómo arreglar el error `dangerouslySetInnerHTML` no coincidió en React
- Cómo solucioné un problema con el estado del formulario de inicio de sesión de React y el autocompletado del navegador
- Cómo configurar HTTPS en una aplicación React en localhost
- Cómo corregir el error "no se puede actualizar un componente mientras se renderiza un componente diferente" en React
- ¿Puedo usar React hooks dentro de un condicional?
- Usar useState con un objeto: cómo actualizar
- Cómo moverse por bloques de código con React y Tailwind
- Reaccionar, enfocar un elemento en Reaccionar cuando se agrega al DOM
- Reaccionar, editar texto con doble clic