render props
最后更新于：2022-04-02 05:39:29
## 前言
Render props作为共享组件逻辑的一种有效模式，此模式借助state和辅助参数，可以提供ui的更好的灵活性。
## render funtion
在我们的组件中，我们都需要定义一个render方法，在这个方法中定义我们需要渲染的部分。
```
// 之前
render(){
const {on} = this.state
return (
)
}
```
## 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 (
{(on,toggle)=>(
)
}
```
## 解构出一种常用的toggle组件使用
```
function CommonToggle(props) {
return(
{({on, toggle}) =>
';
{ on ? 'button is on' : 'button is off'}
)
}>
{ on ? 'button is on' : 'button is off'}
)
}