React中实现多条件渲染的优雅高可读性方案

你提到的三种常规写法的核心缺陷分别是：嵌套三元逻辑零散割裂、全量JSX配置映射冗余臃肿、独立权限组件拆分导致props透传成本过高。以下方案可根据项目业务复杂度组合使用，兼顾可读性、可维护性和复用性。

方案1：通用权限容器组件（轻量场景首选） #

把权限判断逻辑从业务JSX里抽离，封装成语义化的通用容器组件，全局只需要实现一次，业务侧不需要写任何嵌套判断，也不需要提前配置冗余的映射关系。

import { useUserPermissions } from '@/store/user'; // 替换为你项目实际的权限获取方法

/**
 * 权限判断容器
 * @param requiredPerm 单个权限标识，或需要校验的权限标识数组
 * @param fallback 无权限时渲染的兜底内容，默认不渲染
 * @param permLogic 多权限校验逻辑，AND为需满足所有权限，OR为满足任一即可
 */
function Can({ requiredPerm, fallback = null, children, permLogic = 'AND' }) {
  const userPerms = useUserPermissions();

  const hasPermission = Array.isArray(requiredPerm)
    ? permLogic === 'AND'
      ? requiredPerm.every(perm => userPerms.includes(perm))
      : requiredPerm.some(perm => userPerms.includes(perm))
    : userPerms.includes(requiredPerm);

  return hasPermission ? children : fallback;
}

业务侧使用时语义非常清晰，完全替代嵌套三元：

function TestPage() {
  return (
    <>
      {/* 标题区权限判断 */}
      <Can requiredPerm="permission:A" fallback={<BTitle />}>
        <ATitle />
      </Can>
      {/* 头部区多权限组合判断，无需嵌套 */}
      <Can requiredPerm={["permission:B1", "permission:B2"]} fallback={<CHead />}>
        <BHead />
      </Can>
      <Can requiredPerm="permission:B1">
        <AHead />
      </Can>
    </>
  )
}

这个方案的优势：

• 权限判断逻辑全局统一，后续如果权限规则调整（比如从字符串匹配改成接口返回的code映射），只需要修改Can组件内部逻辑即可，业务代码完全不需要动
• 业务JSX里的权限判断语义化极强，新接手的开发者扫一眼就能知道每个区块对应的权限要求
• 没有冗余配置，组件只有在实际匹配到权限时才会渲染，不会出现全量映射提前实例化所有组件的性能浪费

方案2：轻量权限映射（复杂权限矩阵场景） #

如果业务中存在多权限组合对应整套页面区块差异的情况（比如你举例的A/B/AB三种权限组合对应不同的头部、标题、内容区），不要直接在映射对象里写全量JSX，只维护组件引用的映射关系即可，既保留集中管理的优势，又避免结构臃肿。

// 只维护权限key和对应组件的引用关系，不直接写JSX
const permComponentMap = {
  A: { Head: AHead, Title: ATitle, Body: ABody },
  B: { Head: BHead, Title: BTitle, Body: BBody },
  AB: { Head: BHead, Title: ATitle, Body: BBody }
};

function TestPage(props) {
  // 计算当前用户匹配的权限key
  const currentPermKey = useMemo(() => {
    const { hasPermA, hasPermB } = getCurrentUserPermStatus();
    if (hasPermA && hasPermB) return 'AB';
    return hasPermA ? 'A' : 'B';
  }, [/* 权限相关依赖项 */]);

  const { Head, Title, Body } = permComponentMap[currentPermKey];
  // 公共props统一传递，不需要拆分多个组件后逐层透传
  const commonProps = {
    userId: props.userId,
    pageId: props.pageId,
    onRefresh: props.onRefresh
  };

  return (
    <>
      <Title {...commonProps} />
      <Head {...commonProps} />
      <Body {...commonProps} />
    </>
  )
}

这个方案的优势：

• 比直接写JSX的映射对象精简70%以上，组件只有在实际渲染时才会实例化，没有冗余开销
• 公共props统一传递，完全避免拆分独立权限组件带来的多层props透传问题
• 权限组合规则集中管理，调整权限和区块的对应关系时，不需要在零散的三元判断里找对应逻辑

方案3：配套自定义权限Hook（逻辑+渲染统一复用） #

如果除了渲染层面的条件控制，你还需要在业务逻辑里做权限判断（比如点击按钮前校验权限、请求接口前做权限拦截），可以把权限判断逻辑抽成自定义Hook，和上面的Can组件共用同一套判断规则，避免逻辑不一致。

function usePermission() {
  const userPerms = useUserPermissions();

  const can = useCallback((requiredPerm, logic = 'AND') => {
    return Array.isArray(requiredPerm)
      ? logic === 'AND'
        ? requiredPerm.every(perm => userPerms.includes(perm))
        : requiredPerm.some(perm => userPerms.includes(perm))
      : userPerms.includes(requiredPerm);
  }, [userPerms]);

  return { can, userPerms };
}

// Can组件可以直接复用这个Hook，保证逻辑完全统一
function Can({ requiredPerm, fallback = null, children, permLogic = 'AND' }) {
  const { can } = usePermission();
  return can(requiredPerm, permLogic) ? children : fallback;
}

业务逻辑里的使用示例：

function EditButton() {
  const { can } = usePermission();
  const handleClick = () => {
    if (!can('permission:edit')) {
      alert('您没有编辑权限');
      return;
    }
    // 正常编辑逻辑
  };

  return <button onClick={handleClick}>编辑内容</button>
}

实践建议：不要过度抽象。如果只是单个位置的简单权限判断，直接写基础的三元运算符、&&短路判断完全足够；只有当相同的权限判断逻辑在3处及以上复用时，再考虑抽成通用组件或Hook，避免为了追求"优雅"增加不必要的理解成本。

内容的提问来源于stack exchange，提问作者홍우지