react进阶之render props

前言

Render props作为共享组件逻辑的一种有效模式,此模式借助state和辅助参数,可以提供ui的更好的灵活性。

render funtion

在我们的组件中,我们都需要定义一个render方法,在这个方法中定义我们需要渲染的部分。

// 之前

render(){
  const {on} = this.state
  return <Switch on={on} onClick={this.toggle} />
}
// 之后
renderUI() {
  const {on} = this.state
  return <Switch on={on} onClick={this.toggle} />
}
render() {
  return this.renderUI()
}

优化renderUI为纯函数

不依赖于组件,参数全部依赖传入

const renderUI = ({on, toggle}) => <Switch on={on} onClick={toggle} />
render(){
    return this.renderUI({
        on:this.state.on,
        toggle:this.toggle
    })
}

移出外部使用仍然是可以的

// 组件外
const renderUI = ({on, toggle}) => <Switch on={on} onClick={toggle} />

// 组件
class Toggle extend React.Component{
state = { on :false}
toggle = ()=>
    this.setState(
    ({on}) => ({on:!on}),
    () =>{
        this.props.onToggle(this.state.on)
        }
    )
// 组件内
render(){
    return this.renderUI({
        on:this.state.on,
        toggle:this.toggle
    })
}

}

定义默认配置

那么基于以上的认知,我们可以进一步把渲染组件的部分通过属性得到。设置一个默认属性。

static defaultProps = {renderUI}
render(){
    return this.props.renderUI({
        on:this.state.on,
        toggle:this.toggle
    })
}

自定义拓展配置

在定义好render部分可以依赖于外部render属性之后,我们可以自定义渲染,加入自己想要的渲染dom。我们定义一个Usage的方法。

在这个方法中,我们可以更加灵活的根据自己的需求,在原来的组件基础上加上自己需要的自定义渲染。

function Usage({
    onToggle = (aregs) => console.log('Ontoggle',...aregs)
}){
   return ( <Toggle onToggle={onToggle} renderUI = {(on,toggle)=>(
     <div>
       { on ? 'button is on' : 'button is off'}
       <Switch on={on} onClick={toggle} />
       <button onClick={toggle}>{on? 'on': 'off'}</button>
     </div>
    )

    }>
    </Toggle>)
}

props.children 也是可以的

如果你觉得上面的方式不是很好,你也可以通过children的方式来自定义使用render的部分。

// 组件内
class Toggle extends React.Component{
    render(){
        this.props.children({
            on:this.state.on,
            toggle:this.toggle
        })
    }
}
function Usage({
    onToggle = (aregs) => console.log('Ontoggle',...aregs)
}){
    return (<Toggle onToggle={onToggle}  >
        {(on,toggle)=>(
     <div>
       { on ? 'button is on' : 'button is off'}
       <Switch on={on} onClick={toggle} />
       <button onClick={toggle}>{on? 'on': 'off'}</button>
     </div>
    )

    }
    </Toggle>)
}

解构出一种常用的toggle组件使用

function CommonToggle(props) {
  return(
    <Toggle {...props}>
      {({on, toggle}) => <Switch on={on} onClick={toggle} />}
  )
}

小结

以上就是关于render props模式关于共享组件ui渲染部分的进阶常识,你Get了么?希望在我们业务组件或者ui组件的时候,能根据自己的需求灵活的调整哦。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木子墨的前端日常

React-Native开发笔记 持续更新

1、css单位转换px2dp 在做页面开发的时候习惯了用rem去做css单位,处理各种尺寸数据,到了React-Native里面做app开发时,rem就不好用...

17240
来自专栏java思维导图

一文理解Netty模型架构

本文基于Netty4.1展开介绍相关理论模型,使用场景,基本组件、整体架构,知其然且知其所以然,希望给读者提供学习实践参考。

17140
来自专栏互联网技术栈

Dubbo 3.0 即将到来

据了解,新的 Dubbo 内核与 Dubbo 2.0 完全不同,但它兼容 2.0。Dubbo 3.0 将以 Streaming 为内核,而不再是 2.0 时代的...

14520
来自专栏一个会写诗的程序员的博客

Jest + Selenium WebDriverJest + Selenium WebDriver

https://medium.com/@mathieux51/jest-selenium-webdriver-e25604969c6

32640
来自专栏Java帮帮-微信公众号-技术文章全总结

三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?【面试+工作】

最近正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点。同时BizCharts基于G2进行封装,Bi...

92610
来自专栏一个会写诗的程序员的博客

用户登录前后端分离开发实战案例:React,npm,webpack,ES6, Kotlin, Spring Boot, Gradle, Freemarker, Material UIKotlin 开发

用户登录前后端分离开发实战案例:React,npm,webpack,ES6, Kotlin, Spring Boot, Gradle, Freemarker, ...

35930
来自专栏菜鸟前端工程师

react-开发经验分享-async与生命周期函数

14020
来自专栏IT平头哥联盟

职场寒冬 请不要让码农只能活在青春里~

“我月入3万,怎么会少少了你一个鸡蛋啊?” 这是2017年9月左右的一个新闻,一位煎饼摊大妈因和顾客争执时脱口而出这样一句话而走红。当时还上了各大新闻的头条。

10220
来自专栏一个会写诗的程序员的博客

一篇文章读懂 React and redux 前端开发 -DvaJS, a lightweight and elm-style framework.快速上手Dva 概念 #例子和脚手架Dva 图解K

DvaJS: React and redux based, lightweight and elm-style framework.

30430
来自专栏一个会写诗的程序员的博客

Redux 异步数据流初探

用React写的项目中各组件的状态依赖关系非常复杂,为了便于管理组件的状态,使用 Redux。

12220

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励