Javascript 全局功能组件挂钩

我正在尝试对每个组件应用条件渲染。其思想是，该钩子检查传递给组件的特定属性名称，如果该属性存在并且具有值，则它必须传递某些条件以进行渲染，如果该属性丢失，则按常规进行渲染。所以库的内部组件不会被这个钩子击中，因为它们缺少这个属性。我知道我可以将每个组件封装到包含此逻辑的包装器中，但这意味着完全重写和大量额外代码

用途：基于用户权限呈现组件

我希望通过使用未记录（虚构）代码实现的示例

const useBeforeComponentRender=（道具，下一步）=>{
//next（）是函数组件
const{userRightsArray}=AppContext；
const requiredRights=props.renderWithRights；
if（Array.isArray（必需权限））{
if（requiredRights.some（r=>userRightsArray.includes（r）））{
返回next（）；
}否则{
返回null；
}
}
返回next（）；
}
hook（{useBeforeComponentRender}）；
函数ActionBox（）{
返回(
)
}

---

任何建议（即使是不同的方法）都将不胜感激。

我认为这是不可能的。没有像Express那样的中间件可以为每个组件运行。让我们假设这是可能的，假设您使用Typescript，您将如何告诉TS每个组件都接受这个额外的道具（他们甚至不使用）？HOC恐怕是一个不错的选择。在我看来，在每个必须具备此条件的组件周围添加一个额外的withRights（）HOC不会太麻烦。@jper我更喜欢直截了当的解决方案，所以值得一问。谢谢

const useBeforeComponentRender = (props, next) => {
  // next() is functional Component
  const { userRightsArray } = AppContext;
  const requiredRights = props.renderWithRights;

  if (Array.isArray(requiredRights)) {
    if (requiredRights.some(r => userRightsArray.includes(r))) {
      return next();
    } else {
      return null;
    }
  }
  return next();
}
React.hook({useBeforeComponentRender});

function ActionBox() {
  return (
    <EditButton renderWithRights=['edit', 'superAdmin']>
  )
}