## 前言 我们经常需要把一些常见的组件属性封装到一个对象里，然后在渲染属性中使用。 ## 回顾下之前的写法 ``` 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中的部分公用属性封装为一个对象，然后进行简化操作。