React中如何基于角色权限控制组件内部元素的显示与隐藏

你当前的代码存在2个核心问题：一是权限组件没有返回需要渲染的子元素，二是权限校验函数缺少边界处理，匹配不到权限项时会触发类型错误。以下是修正后的可运行实现：

1. 权限校验工具函数 #

export const checkPermission = (permission, configuration) => {
  // 配置不存在直接返回无权限
  if (!configuration) return false
  // 用find代替filter，匹配到第一个对应权限项即停止查找，性能更优
  const targetPermission = configuration.find(item => item.name === permission)
  // 没有匹配到权限项 或者 读权限为false时返回无权限
  return targetPermission ? targetPermission.permission.read : false
}

2. ShowForPermission 权限控制组件 #

import React from 'react'
import { checkPermission } from './对应工具文件路径'

export const ShowForPermission = ({ permission, configuration, children }) => {
    const isAllowed = checkPermission(permission, configuration);
    // 有权限返回包裹的子元素，无权限返回null不渲染
    return isAllowed ? children : null
}

3. 组件使用示例 #

注意原来的标签需要正确闭合：

<ShowForPermission permission="My Studies" configuration={configuration}>
  <div>Mystudies</div>
</ShowForPermission>

可选扩展 #

如果需要支持无权限时展示 fallback 占位内容，可以修改组件为：

export const ShowForPermission = ({ permission, configuration, children, fallback = null }) => {
    const isAllowed = checkPermission(permission, configuration);
    return isAllowed ? children : fallback
}

使用时可以传入自定义占位内容：

<ShowForPermission 
  permission="My Studies" 
  configuration={configuration}
  fallback={<div>暂无访问权限</div>}
>
  <div>Mystudies</div>
</ShowForPermission>

内容的提问来源于stack exchange，提问作者van