术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术
具有 render prop 的组件接受一个函数,该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。
<DataProvider render={data => (
<h1>Hello {data.target}</h1>
)}/>
上面是官方的解释,我的个人理解是: 当前组件(DataProvider)接收一个函数组件(render),DataProvider只需要提供数据不去管怎么渲染的,render接收到数据后只管去渲染就完事
举个例子:
import React from "react"
import PropTypes from 'prop-types'
// 1 创建组件 Mouse, 该组件接收一个叫 render 的函数,组件内部声明复用的 state 以及 逻辑方法
class Mouse extends React.Component {
static propTypes = {
// 参数校验 接收一个 render 类型为函数 必传
render: PropTypes.func.isRequired
}
constructor(props) {
super(props)
this.state = {
x: 0,
y: 0
}
}
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render() {
return (
<div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
{/* 2 Mouse 中调用this.props.render() 传入data,具体的渲染在 render 里面 */}
{this.props.render({
x: this.state.x,
y: this.state.y
})}
</div>)
}
}
class Renderprops extends React.Component {
render() {
return (
<div>
{/* 3 使用组件 Mouse 时必须传入一个函数 render, render 相当于一个函数组件 */}
<Mouse render={({ x, y }) => {
//render 接收数据 - 渲染页面
//Mouse 组件并不知道要渲染成什么东西,你可以 return <h1>{x}----{y}</h1>,也可以是<p>{x}----{y}</p>...
return <p>{x}----{y}</p>
}} />
</div>)
}
}
export default Renderprops
render 只是一个组件的 props 的名称,是我们任意给的,既然这样我们可以使用 children, children 是我们的固有函数
Mouse
render() {
return (
<div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
{this.props.children({
x: this.state.x,
y: this.state.y
})}
</div>)
}
调用
<Mouse>
{({ x, y }) => {
return <p>{x}----{y}</p>
}
}
</Mouse>