React学习之 Render props

时间:2020-04-16
本文章向大家介绍React学习之 Render props,主要包括React学习之 Render props使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一、这是个啥?

相信很多人和我一样,在听到这个名词的时候第一想知道的这是个啥,是个是咱翻一下官方文档:

  • 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。
  • render prop 是一个用于告知组件需要渲染什么内容的函数 prop。
  • 如果一个组件不知道自己渲染什么东西,或者说一个组件的基础功能是提供”可变数据源“,具体展示UI可以从外部注入,那么就可以用这个技术了。

看完这两句话并没有很清楚这是个啥。。但学过vue的童鞋肯定已经猜到了这描述很像vue的slot功能。slot就是在写一个组件的时候把不确定渲染的内容用一个slot代替,然后再需要的地方替换这个slot为真正需要渲染的内容,我觉得render props应该也是做这个工作得。带着这个疑问我们写一个官网得例子来验证一下。

二:怎么用?

案例:

实现这样一个功能,实时显示鼠标的滚动位置

import React from "react";
import ReactDOM from "react-dom";
class MouseTruck extends React.Component {
  state = {
    x: 0,
    y: 0,
  }
  onMouseMove = (event) => {
    this.setState({
      x : event.clientX,
      y : event.clientY
    })
  }
  render(){
    return (
      <div onMouseMove={this.onMouseMove}>
        <p>实时监听鼠标滚动位置</p>
        <p>当前鼠标的位置是x = {this.state.x}, y={this.state.y}</p>
      </div>
    )
  }
}

ReactDOM.render(<MouseTruck></MouseTruck>, document.getElementById("root"));

在这里组件MouseTruck提供了可变数据源state,然后再下面render得时候进行渲染。但是我们不想将render的内容写死,那就可以借助react的render props属性来改写了。有两种方法:

第一种是直接将需要渲染的内容作为组件的children传入。

import React from "react";
import ReactDOM from "react-dom";
class MouseTruck extends React.Component {
  state = {
    x: 0,
    y: 0,
  }
  onMouseMove = (event) => {
    this.setState({
      x : event.clientX,
      y : event.clientY
    })
  }
  render(){
    return (
      <div onMouseMove={this.onMouseMove}>
        {this.props.children(this.state)}
      </div>
    )
  }
}

ReactDOM.render(<MouseTruck>
  {
    props =>(
      <>
          <h1>实时监听鼠标滚动位置</h1>
          <p>当前鼠标的位置是x = {props.x}, y={props.y}</p>
      </>
    )
  }
  
</MouseTruck>, document.getElementById("root"));

把需要灵活渲染的内容改写成一个函数,

{
    props =>(
      <>
          <h1>实时监听鼠标滚动位置</h1>
          <p>当前鼠标的位置是x = {props.x}, y={props.y}</p>
      </>
    )
  }

然后在组件里面通过this.props.children去调用这个函数,并且传入相关参数

      <div onMouseMove={this.onMouseMove}>
        {this.props.children(this.state)}
      </div>

第二种是将一个值为函数的render作为属性传给组件:

import React from "react";
import ReactDOM from "react-dom";
class MouseTruck extends React.Component {
  state = {
    x: 0,
    y: 0,
  }
  onMouseMove = (event) => {
    this.setState({
      x : event.clientX,
      y : event.clientY
    })
  }
  render(){
    return (
      <div onMouseMove={this.onMouseMove}>
        {this.props.render(this.state)}
      </div>
    )
  }
}

ReactDOM.render(<MouseTruck render={props =>(
    <>
        <h1>实时监听鼠标滚动位置</h1>
        <p>当前鼠标的位置是x = {props.x}, y={props.y}</p>
    </>
  )}
>  
</MouseTruck>, document.getElementById("root"));

给父组件一个render属性,这个属性的值是一个函数,然后在父组件里面通过this.props.render去调用,并且把需要的“可变数据源”作为参数传给render函数,至于具体的渲染内容父组件不需要关心,由render自己决定。

虽然语法和vue不一样,但是思想就是vue的slot思想。

 

原文地址:https://www.cnblogs.com/lyt0207/p/12711033.html