## 前言 通過上篇的介紹，我們可以把一些常見的屬性封裝到一個輔助方法里，讓我們對這部分的使用更加方便。 但這樣并不是非常的完美，因為有些時候我們需要獲取其部分屬性，還有部分場景下可以追加自己的事件。 ## 獲取設置屬性 比如之前的案例中，我們在toggle組件使用中，針對on屬性需要顯性的作為入參才可以使用，追加的onclick事件不但希望觸發toggle事件，也希望可以進行自定義事件的觸發 ``` function Usage({ onToggle = (...args) => console.log('onToggle', ...args), }) { return ( <Toggle onToggle={onToggle}> {({on, togglerProps}) => ( <div> <Switch on={on} {...togglerProps} /> <hr /> <button aria-label="custom-button" {...togglerProps}> {on ? 'on' : 'off'} </button> </div> )} </Toggle> ) } ``` ## 將屬性進行封裝，事件的部分進行封裝 ### 增加額外獲取屬性方法 ``` getStateAndHelpers() { return { on: this.state.on, toggle: this.toggle, // 增加額外的屬性 用于給函數的子組件方便獲取任意需要的屬性 getTogglerProps: this.getTogglerProps, } } ``` ### 定義getTogglerProps方法 不僅要考慮到封裝好所有的props屬性，也要封裝其他的需要屬性，比如aria-pressed的屬性，以及對特殊OnClick進行事件的綁定，與此同時也讓其觸發toggle原本的方法 ``` getTogglerProps = ({onClick,className, ...props} = {}) => ({ 'aria-pressed': this.state.on, onClick: callAll(onClick, this.toggle), // 如果你想添加額外的className進行支持 在其傳入時 進行添加 className:`${className} our-custom-class-name` ...props, }) ``` ### 定義callAll 方法 執行 需要額外注意的是，前面要追加fn &，因為追加的事件是需要顯性定義然后才執行的，而如果是toogle本身的點擊是不需要定義點擊事件的，直接執行事件會報錯。 ``` const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args)) ``` ### 使用時的外部事件以及使用差異 ``` function Usage({ onToggle = (...args) => console.log('onToggle', ...args), // 額外的點擊事件 onButtonClick = () => console.log('onButtonClick'), }) { return ( <Toggle onToggle={onToggle}> {({on, getTogglerProps}) => ( <div> // on屬性通過getTogglerProps 賦值 <Switch {...getTogglerProps({on})} /> <hr /> // 試想你會怎么寫？你可能會寫一個行內函數 ？如果我們直接只寫自己的事件，那么toggle的切換就無法完成；但寫成這樣toogle內就不方便修改或者外部使用時外部與組件內觸發的事件本就是不同的。 <button {...togglerProps} 'aria-label': 'custom-button', id="custom-button-id", onClick: {( => { onButtonClick() togglerProps.onClick() })}, > {on ? 'on' : 'off'} </button> // 將點擊事件單獨作為屬性傳入，默認執行其默認的點擊，同時將其屬性一次性封裝傳入 <button {...getTogglerProps({ 'aria-label': 'custom-button', onClick: onButtonClick, id: 'custom-button-id', })} > {on ? 'on' : 'off'} </button> </div> )} </Toggle> ) } ``` ## 小結 看上去有點亂，我簡單梳理下當我們的組件事件除了使用組件之外，希望方便的獲取組件屬性，或者需要針對一些組件事件增加額外的事件邏輯而進行一定的解耦，那么可以通過額外定義一個getToggleProps的方法來簡化操作，也可以用來支持業務特殊的組件回調函數方便解耦。