react render propsGetter

前言

經過上篇的介紹，咱們能夠把一些常見的屬性封裝到一個輔助方法裏，讓咱們對這部分的使用更加方便。

但這樣並非很是的完美，由於有些時候咱們須要獲取其部分屬性，還有部分場景下能夠追加本身的事件。

獲取設置屬性

好比以前的案例中，咱們在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的方法來簡化操做，也能夠用來支持業務特殊的組件回調函數方便解耦。