react进阶之render props
react进阶之render props
RobinsonZhang
发布于 2018-12-28 16:09:24
发布于 2018-12-28 16:09:24
前言
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组件的时候，能根据自己的需求灵活的调整哦。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-12-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录