Skip to main content
Version: 2.x

If 条件渲染

有些场景下，我们希望 Storyboard 可以根据特性开关或其它动态数据进行特定配置，例如根据用户权限决定使用哪些构件/路由。

普通条件​

例如对于以下构件配置：

bricks:
  - if: '<% !!FLAGS["your-feature"] %>'
    brick: your-brick-a
  - if: '<% !FLAGS["your-feature"] %>'
    brick: "your-brick-b"

当特性开关 your-feature 打开时，将显示构件 your-brick-a，反之则显示 your-brick-b。

Tips: 从 brick_next: 1.27.4 开始，if 表达式不再要求必须返回 boolean 值，平台将自动做类型转换。

当使用参数注入或 transform 时，应确认最终得到一个 `boolean` 值，例如在求值占位符中可以使用取反运算符 `!!someValue`，在注入占位符中使用 `| bool` 或 `| not`，因为平台仅在识别到 `if: false` 时才跳过渲染。

Resolvable 条件​

当条件需要请求服务端接口或需要更复杂的逻辑计算得到时，可以使用 Resolvable 条件（类似 useResolves 的机制）：

bricks:
  - if:
      useProvider: "your-permission-provider"
      transform:
        if: "@{permOfUpdateTools | bool}"
    brick: "your-brick-a"
  - if:
      useProvider: "your-permission-provider"
      transform:
        if: "@{permOfUpdateTools | not}"
    brick: "your-brick-b"

当系统渲染时，如果 your-permission-provider 返回的对象中的 permOfUpdateTools 为 true 时，页面将显示 your-brick-a 构件，反之将显示为 your-brick-b。

注意：当使用 Resolvable 条件时，应始终返回一个 { if?: boolean } 的对象。

变更历史​

组件版本变更
brick_next1.27.4当 rawIf !== undefined && Boolean(resolvedIf) === false 时跳过渲染
-1.15.24仅当最终得到的 resolvedIf === false 时才跳过渲染
-1.15.5开始支持条件渲染