React 如何做 组件 & 标签 级权限控制 ？

Question

1 . 组件权限控制
考虑使用HOC来做，如果手动给所有需要的组件添加HOC太麻烦了

• 能不能遍历到全局组件或者像Vue中的全局mixin方式？
• 或者其他方案？

2 . html标签权限如何控制？

• 有没有类似Vue指令的东西
• 或者其他方案？

初到react，大神们给长长眼，谢谢！

Answer 1

I found a good way:

const access = {} // 权限字段列表

const createElement = React.createElement
React.createElement = function rCreateElement(...args: any): any {
  const mixProps = args[1]
  if (mixProps) {
    const auth = mixProps.auth
    delete mixProps.auth
    // 权限校验
    // auth: 指定权限字段的prop
    if (access && access[auth] === false) {
      return null
    }
  }
  return createElement(args[0], ...args.slice(1))
}

usage:

// 标签
<p auth="test">please Login</p>

// 组件
<Resizeable
    auth="test"
    className="k-left__top"
    horizontal
    storeName="left-top-height"
    max={600}
    min={200}
    defaultValue={200}
>
555
</Resizeable>