render props的封装
最后更新于：2022-04-02 05:39:32
## 前言
我们经常需要把一些常见的组件属性封装到一个对象里，然后在渲染属性中使用。
## 回顾下之前的写法
```
function Usage({
onToggle = (aregs) => console.log('Ontoggle',...aregs)
}){
return (
{(on,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 (
{(on,toggle)=>(
)
}
```
## 小结
本文涉及到的技巧非常简单，主要是将render props中的部分公用属性封装为一个对象，然后进行简化操作。
';
{ on ? 'button is on' : 'button is off'}
)
}
{ on ? 'button is on' : 'button is off'}
)
}