react进阶组件之Render Props小结

栏目: IOS · Android · 发布时间: 5年前

内容简介:Render props作为共享组件逻辑的一种有效模式,此模式借助state和辅助参数,可以提供ui的更好的灵活性。在我们的组件中,我们都需要定义一个render方法,在这个方法中定义我们需要渲染的部分。不依赖于组件,参数全部依赖传入

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)
}){
    <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)
}){
    <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组件的时候,能根据自己的需求灵活的调整哦。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

后现代经济

后现代经济

姜奇平 / 中信出版社 / 2009-7 / 45.00元

《后现代经济:网络时代的个性化和多元化》站在历史“终结”与“开始”的切换点上,以价值、交换、货币、资本、组织、制度、福利等方面为线索,扬弃现代性经济学,对工业化进行反思,深刻剖析了“一切坚固的东西都烟消云散”的局限性,在此基础上展开对现代性经济的解构和建构。“9·11”中坚固的世贸中心大楼灰飞烟灭,2008年坚固的华尔街投资神话彻底破灭,坚固的雷曼兄弟公司在挺立了158年后烟消云散……一切坚固的东......一起来看看 《后现代经济》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具