前言
我们经常需要把一些常见的组件属性封装到一个对象里,然后在渲染属性中使用。
回顾下之前的写法
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>)
}
复制代码
发现的问题
从上面的例子中,我们可以看到onClick属性,在switch组件以及button组件都传入了一个事件属性并绑定了同一个函数。这部分可以优化为下面的方式。
// 吧需要的点击属性封装到一个对象里
getStateAndHelpers() {
return {
on: this.state.on,
toggle: this.toggle,
togglerProps: {
onClick: this.toggle,
'aria-pressed': this.state.on,
} }
}
render(){
return this.props.children(this.getStateAndHelpers())
}
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} {...togglerProps} />
<button {...togglerProps}>{on? 'on': 'off'}</button>
</div>
)
}
</Toggle>)
}
复制代码
小结
本文涉及到的技巧非常简单,主要是将render props中的部分公用属性封装为一个对象,然后进行简化操作。