Una funcion que recibe un componente y devuelve otro, agregandole cierto comportamiento.
import React from 'react'
import withMouse from './withMouse'
const App = ({ x, y }) => (
<div style={{ height: '100vh' }}>
The mouse position is ({x}, {y})!
</div>
)
export default withMouse(App)
import React from 'react'
import hoistStatics from 'hoist-non-react-statics'
import { getName } from './utils'
const withMouse = Component => {
class WrappedComponent extends React.Component {
static displayName = `withMouse(${getName(Component)})`
state = {
x: 0,
y: 0
}
handleMouseMove = event => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
<Component {...this.props} {...this.state} />
</div>
)
}
}
return hoistStatics(WrappedComponent, Component)
}
export default withMouse
Componentes que delegan el renderizado al cosumidor aceptando una funcion como
prop (lo mas usado es children
o render
) y renderizan el resultado de llamar
esa funcion con ciertos parametros.
- awesome-react-render-props 😎
- Michael Jakson: Video Never Write Another HoC
- Ryan Florence: Video ‹Rethinker stop={false}/›
import React from 'react'
import Mouse from './Mouse'
const App = () => (
<Mouse>
{({ x, y }) => (
<div style={{ height: '100vh' }}>
The mouse position is ({x}, {y})!
</div>
)}
</Mouse>
)
export default App
import React from 'react'
class Mouse extends React.Component {
state = {
x: 0,
y: 0
}
handleMouseMove = event => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render() {
const rcb = this.props.children || this.props.render
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
{rcb(this.state)}
</div>
)
}
}
export default Mouse