React之Render Props

术语 “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>