前端教程:React的RenderProps的用法

开课吧开课吧锤锤2021-07-14 14:04

今天和大家聊一下React中的RenderProp的使用方法,并通过案例来分析下高阶组件与RenderProps的优缺点。  

React的RenderProps的用法

什么是RenderProps呢?官方文档的介绍如下:  

术语“renderprop”是指一种在React组件之间使用一个值为函数的prop共享代码的简单技术具有renderprop的组件接受一个函数,该函数返回一个React元素并调用它而不是实现自己的渲染逻辑。  

根据官方文档,我们了解到:  

1、RenderProp是组件间的一种使用方式,最少需要两个组件。  

2、父组件接收一个参数,参数的值为函数。  

3、这个函数在父组件内部合适的位置调用。  

4、该函数调用后返回一个React元素(组件)。  

5、具有RenderRrop的组件不需要实现具体的渲染逻辑。  

根据上面四个特点,我们来实现Mouse组件的功能,Mouse组件获取鼠标拖动的实时坐标并且展示出来,代码如下: 

import React,{Component} from 'react';
class Mouse extends Component {
    constructor(props) {
        super(props);
        this.state = {
            x:0,
            y:0
        }
    }
    handleMouse=(e)=>{
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    render() {
        return <div
            onMouseMove={this.handleMouse}
            style={{
                background:"red",
                height:"100px",
                width:"500px",
            }}
        >
            <h1>x:{this.state.x}</h1>
            <h1>y:{this.state.y}</h1>
        </div>
    }
}
export default Mouse;

代码很简单,这次我们用RenderProps来封装获取鼠标坐标的功能。代码如下:  

import React,{Component} from 'react';
//1、具有render prop功能的组件
class Mouse extends Component {
    constructor(props) {
        super(props);
        this.state = {
            x:0,
            y:0
        }
    }
    handleMouse=(e)=>{
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    render() {
        return <div
            onMouseMove={this.handleMouse}
            style={{
                background:"red",
                height:"100px",
                width:"500px",
            }}
        >
            {/*2、调用render函数,并且将父组件中得到的数据以参数形式进行传递*/}
            {/*render函数调用后,返回的是一个组件*/}
            {this.props.render(this.state.x,this.state.y)}
        </div>
    }
}
//3、目标组件,具体如何渲染组件由这个组件决定,组件内部接收父组件传递的参数
class Show extends Component{
    constructor(props) {
        super(props);
    }
    render() {
        return <div>
            <h1>x:{this.props.x}</h1>
            <h1>y:{this.props.y}</h1>
        </div>
    }
}
export default ()=>{
    return <Mouse render={(x,y)=><Show x={x} y={y}/>}></Mouse>
};

阅读源码,首先我们定义了一个Mouse组件,这个组件就应用了RenderProp功能。仔细观察,这个Mouse组件的内部主要功能是获取鼠标拖动时的实时坐标,在组件的render函数中调用了props属性上的render方法,这说明Mouse组件在运行时需要外部传递一个render参数,并且这个参数是一个函数。最重要的一点这个函数的执行结果返回的是React元素(组件实例)。  

然后我们再阅读Show组件,此代码就比较简单了,获取x,y参数将其展示出来。  

以上内容由开课吧小编为大家整理发布的“前端教程:React的RenderProps的用法”一文,更多Web教程相关内容尽在开课吧广场Web教程频道。  

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营