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的方法来简化操做，也能够用来支持业务特殊的组件回调函数方便解耦。