進階組件之render props中進行公共屬性的對象封裝

前言

咱們常常須要把一些常見的組件屬性封裝到一個對象裏，而後在渲染屬性中使用。

回顧下以前的寫法

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中的部分公用屬性封裝爲一個對象，而後進行簡化操做。