> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiI2YTZiNWQ0My1iZDg0LTQxYTYtYTQxMS0zMmVlM2EzODY2NjAiLCJleHAiOjE3NzgyNjQyMzQsImlhdCI6MTc3ODI2MzkzNH0.alH7zKPP1sL9Jk2C-jWscBE9FYxvIXtXcOUuvX86LO8
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# If

> 基于读者正在查看的产品或版本，或者如果您的文档使用身份验证时基于他们的角色来显示或隐藏内容。

`<If>` 组件让您可以基于读者正在查看的产品或版本，或者如果您的文档使用身份验证时基于他们的角色来显示或隐藏内容。

## 变体

### 按产品

使用 `products` 属性来仅在读者查看特定[产品](/learn/docs/configuration/products)时显示内容。`products` 数组中的值对应于您的 `docs.yml` 中定义的产品标识符。

```jsx Markdown
<If products={["orchids"]}>
  此内容仅在查看兰花产品时显示。
</If>

<If products={["orchids", "succulents"]}>
  此内容在兰花和多肉植物产品中都会显示。
</If>
```

### 按版本

使用 `versions` 属性来仅在读者查看特定[版本](/learn/docs/configuration/versions)时显示内容。`versions` 数组中的值对应于您的 `docs.yml` 中定义的版本标识符。

```jsx Markdown
<If versions={["v1"]}>
  此内容仅在版本 v1 中显示。
</If>

<If versions={["v2"]}>
  此内容仅在版本 v2 中显示。
</If>
```

### 按角色

使用 `roles` 属性来根据已认证用户的角色显示内容。`roles` 数组中的值对应于您的[基于角色的访问控制](/learn/docs/authentication/features/rbac)配置中定义的角色。

```jsx Markdown
<If roles={["admin"]}>
  此内容仅对管理员可见。
</If>
```

### 组合条件

您可以在单个 `<If>` 组件上组合 `products`、`versions` 和 `roles` 属性。当指定多个属性时，**所有**条件都必须匹配。

```jsx Markdown
<If products={["orchids"]} versions={["v2"]}>
  此内容仅在查看版本 v2 的兰花产品时显示。
</If>

<If products={["succulents"]} roles={["beta-users"]}>
  此内容仅在多肉植物产品中对 beta 用户显示。
</If>
```

### 反转条件

使用 `not` 属性来反转任何条件，在条件不匹配时显示内容。

```jsx Markdown
<If products={["legacy"]} not>
  此内容在除 legacy 之外的所有产品中显示。
</If>

<If versions={["v1"]} not>
  此内容在除 v1 之外的所有版本中显示。
</If>
```

## 属性

<ParamField path="products" type="string[]" required={false}>
  仅在读者查看指定产品之一时显示内容。值对应于您的 `docs.yml` 中定义的产品标识符。
</ParamField>

<ParamField path="versions" type="string[]" required={false}>
  仅在读者查看指定版本之一时显示内容。值对应于您的 `docs.yml` 中定义的版本标识符。
</ParamField>

<ParamField path="roles" type="string[]" required={false}>
  仅在已认证用户具有指定角色之一时显示内容。
</ParamField>

<ParamField path="not" type="boolean" required={false} default="false">
  反转条件，在条件不匹配时显示内容。
</ParamField>

<ParamField path="children" type="string | JSX" required={true}>
  要根据条件显示或隐藏的内容。
</ParamField>