## 前言 我們經常需要把一些常見的組件屬性封裝到一個對象里，然后在渲染屬性中使用。 ## 回顧下之前的寫法 ``` 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中的部分公用屬性封裝為一個對象，然后進行簡化操作。