React render props模式

分类 React 标签 React 评论:
  1. React render props模式

React render props模式

render props模式是封装组件的其中一种方式，由外部指定需要渲染的元素，组件内部把状态传递给它，外部声明一个函数式的props，函数参数接收内部状态，返回需要渲染的元素

import React from 'react'

class Mouse extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      x: 0,
      y: 0
    }
  }

  moveHandle = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }

  componentDidMount () {
    window.addEventListener('mousemove', this.moveHandle)
  }

  componentWillUnmount() {
    window.removeEventListener('mousemove', this.moveHandle)
  }

  render () {
    // render props模式，这里渲染的是外面调用的时候传过来的函数的返回值，同时把组件内部的状态传递给外面的函数
    // 外面的传递过来的函数不一定要叫render，任何名字都行，同时还可以把函数放在props.children里面
    // 这种使用方式被称之为render props模式，实现组件的复用
    return this.props.render(this.state)
  }
}

export default Mouse

使用

<Mouse render={mouse => <h1>rendre props-鼠标位置：{mouse.x},{mouse.y}</h1>}></Mouse>

上面是一个简单的render props例子，注意，我们并不是只能使用render作为属性，随便叫什么属性都行，组件内部用法协商好就行

除了在属性上给定函数，还可以直接在children中使用，例如

<Mouse>
  {mouse => <h1>rendre props-鼠标位置：{mouse.x},{mouse.y}</h1>}
</Mouse>

此时组件内部就需要使用children获取渲染函数

render () {
    return this.props.children(this.state)
  }

由于这一技术的特殊性，当你在设计一个类似的 API 时，你或许会要直接地在你的 propTypes 里声明 children 的类型应为一个函数。

Mouse.propTypes = {
  children: PropTypes.func.isRequired
};
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 289211569@qq.com

©2016-2023 Daryl