React: render props 使用指南

什么是Render props

是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。

具有render props的组件接受一个函数,该函数返回一个React元素并调用它,而不是直接实现自己的渲染逻辑。

render props 是一个用于告知组件需要渲染什么内容的组件。

是一种逻辑复用的的一种方式

实现方式

原生实现的方式

class MouseTracker extends React.Component{
  state = {x:0, y: 0}
  handleMouseMove = event => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }
  render(){
    return (
      <div>
        <p>鼠标移动</p>
        <p>鼠标X位置: {this.state.x}</p>
        <p>鼠标Y位置: {this.state.y}</p>
      </div>
    )
  }
}
// 直接通过setState修改之后进行的一种实现

class MouseTracker extends React.Component{
  state = {x:0, y: 0}
  handleMouseMove = event => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }
  render(){
    return (
      <div>
        <p>鼠标移动</p>
        <p>鼠标X位置: {this.state.x}</p>
        <p>鼠标Y位置: {this.state.y}</p>
      </div>
    )
  }
}
// 直接通过setState修改之后进行的一种实现

通过children的方式

  class MouseTrackerChild extends React.Component{
    state = {x:0,y:0}
    handleMouseMove=(event)=>{
      this.setState({
        x: event.clientX,
        y: event.clientY
      })
    }
    render(){
      return (
        <div>
          {this.props.child(this.state)}
        </div>
      )
    }
  }

// usage:
const Component = <MouseTracker>
    {
      props=>(
        <div>
          <p>鼠标X位置: {props.x}</p>
          <p>鼠标Y位置: {props.y}</p>
        </div>
      )
    }
  </MouseTracker>
  class MouseTrackerChild extends React.Component{
    state = {x:0,y:0}
    handleMouseMove=(event)=>{
      this.setState({
        x: event.clientX,
        y: event.clientY
      })
    }
    render(){
      return (
        <div>
          {this.props.child(this.state)}
        </div>
      )
    }
  }

// usage:
const Component = <MouseTracker>
    {
      props=>(
        <div>
          <p>鼠标X位置: {props.x}</p>
          <p>鼠标Y位置: {props.y}</p>
        </div>
      )
    }
  </MouseTracker>

通过render属性


class MouseTrackerRender extends React.Component{
  state = {x:0, y: 0}

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }
  render(){
    return <div>
      {this.props.render(this.state)}
    </div>
  }
}


// usage:
  <MouseTrackerRender  render={
    params=>(<div>
          <p>鼠标X位置: {params.x}</p>
          <p>鼠标Y位置: {params.y}</p>
      </div>)
  } />

class MouseTrackerRender extends React.Component{
  state = {x:0, y: 0}

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }
  render(){
    return <div>
      {this.props.render(this.state)}
    </div>
  }
}


// usage:
  <MouseTrackerRender  render={
    params=>(<div>
          <p>鼠标X位置: {params.x}</p>
          <p>鼠标Y位置: {params.y}</p>
      </div>)
  } />

关于 render prop 可以与HOC相互转换。

react ts

react ts

Render Props 文档链接