Render props作为共享组件逻辑的一种有效模式,此模式借助state和辅助参数,可以提供ui的更好的灵活性。
在我们的组件中,我们都需要定义一个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()
}
不依赖于组件,参数全部依赖传入
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>)
}
如果你觉得上面的方式不是很好,你也可以通过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>)
}
function CommonToggle(props) {
return(
<Toggle {...props}>
{({on, toggle}) => <Switch on={on} onClick={toggle} />}
)
}
以上就是关于render props模式关于共享组件ui渲染部分的进阶常识,你Get了么?希望在我们业务组件或者ui组件的时候,能根据自己的需求灵活的调整哦。