# @bb-tech/ra-components 中文文档

规范地址：https://npmcn.com/package/%40bb-tech/ra-components/

版本：2\.0\.6
npm 元数据更新时间：2023-05-30T09:49:38.123Z
中文译文更新时间：2026-11-07T18:45:17.639Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bb-tech/ra-components
原文对照：https://npmcn.com/package/%40bb-tech/ra-components/?lang=original
项目主页：https://github.com/BigBasket/ra-components#readme
源码仓库：https://github.com/BigBasket/ra-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：79.5 kB，5 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- Node.js 要求：\>=10\.16
- 运行依赖：2 个
- peer 依赖：@mui/icons-material ^5\.4\.2，@mui/material ^5\.0\.0，@mui/styles ^5\.4\.2，classnames ^2\.3\.2，react ^18\.0\.0，react-admin ^4\.0\.1，react-dom ^18\.0\.0，react-json-tree ^0\.16\.1
- 首次发布：2021-07-12T12:54:39.026Z
- 最新版本发布：2023-05-30T09:49:38.007Z
- 近 30 天下载量：13538（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 0 个）

## 中文简介

反应-admin 4.x 的额外开源组件

## 安装

```sh
npm install @bb-tech/ra-components
```

也可以使用：`pnpm add @bb-tech/ra-components`、`yarn add @bb-tech/ra-components`、`bun add @bb-tech/ra-components`

## README

# 关于ra组件

_用于反应-admin的开源组件._

-   一个像菜单结构的树 反应-admin, `TreeMenu`
-   在文本输入中验证 JSON 很容易使用 `JsonInput`。 。 。 .
-   JSON物体现在看起来很漂亮 `JsonField`。 。 。 .
-   数据可以使用 `TrimField` 在数据网等显示时.
-   校验电子邮件, 使用 `EmailInput`。 。 。 .
-   校验 URL, 限制一组特定域 `URLInput`。 。 。 .
-   用于更新记录中值的按钮( 如: 批准/ 重试等) `UpdateButton`。 。 。 .
-   验证电话号码,限制特定国家使用 `PhoneInput`

**支持的反应-admin版本 :**

反应- admin 4. x

# 安装

使用 npm 安装 : `npm install --save @bb-tech/ra-components`

# 基本用途

用于 `ra-components` 在反应admin应用程序中,将必要的软件包导入到您的js文件中.

```js
import {
  TreeMenu,
  JsonInput,
  JsonField,
  TrimField,
} from "@bb-tech/ra-components";
```

2.  现在可以使用代码中的控制了.

```js
<JsonInput source="config" label="JSON Config" />
```

# 树梅努

用于 `ra-treemenu` 在反应admin应用程序中:

1.  创建父资源( 非路径), 选项道具中有以下密钥 : `isMenuParent = true`。记得通过强制性 `name` 此资源中的道具, 因为它将被用于将孩子资源映射到树上指定的父目录 .

```js
<Resource name="users" options={{ label: "Users", isMenuParent: true }} />
```

2.  现在通过绘制 `menuParent` 选项 `options` 给 `name` 用于您父资源.

```js
<Resource name="posts" options={{ label: "Posts", menuParent: "users" }} />
```

这将给您一个菜单结构如下:

![Tree Image](https://npmcn.com/package/%40bb-tech/ra-components/assets/tree.png)

以下是将菜单组织成树状结构的简单例子:

```js
// In App.js
import * as React from "react";
import { Admin, Resource, Layout } from "react-admin";
/* Import TreeMenu from the package */
import TreeMenu from "@bb-tech/ra-components";

const App = () => (
  <Admin layout={(props) => <Layout {...props} menu={TreeMenu} />}>
    {/* Dummy parent resource with isMenuParent options as true */}
    <Resource name="users" options={{ label: "Users", isMenuParent: true }} />
    {/* Children menu items under parent */}
    <Resource name="posts" options={{ label: "Posts", menuParent: "users" }} />
    <Resource
      name="comments"
      options={{ label: "Comments", menuParent: "users" }}
    />
    {/* Dummy parent resource with isMenuParent options as true */}
    <Resource name="groups" options={{ label: "Groups", isMenuParent: true }} />
    {/* Children menu items under parent */}
    <Resource
      name="members"
      options={{ label: "Members", menuParent: "groups" }}
    />
  </Admin>
);

export default App;
```

默认, `TreeMenu` 菜单标题使用当前主题的主要和次要颜色。 它可以通过标记关闭 `setMenuColors` 道具是虚假的。 另外,Dashboard菜单标题是"Dashboard". 可以使用 `dashboardlabel` 道具 (英语).

```js
TreeMenu.defaultProps.dashboardlabel = translate("resources.dashboard.name");
TreeMenu.defaultProps.setMenuColors = false;
<Layout {...props} menu={TreeMenu} />;
```

# Json 输入

`JsonInput` 如果输入的值是否为 JSON ,则验证 . 如果输入的值不是无效的 JSON, `JsonInput` 将投出一个错误.  
默认错误消息是 : `Invalid JSON` 并且可以使用 `errortext` 道具 (英语).

```js
<JsonInput source="config" label="JSON Config" errortext="Enter a valid JSON" />
```

或使用翻译函数 :

```js
<JsonInput
  source="config"
  label={translate("resources.resource_name.fields.config")}
  errortext={translate("myroot.validate.json")}
/>
```

默认, `JsonInput` 解析并返回输入的字符串为对象。 相反,要直接发送字符串,请通过 `parse` 作为道具 `false`

```js
<JsonInput source="config" label="JSON Config" parse={false} />
```

# 杰森·菲尔德

您的 JSON 可以使用树状结构查看 `JsonField` 。 。 。 .

```js
<JsonField source="config" label="JSON Config" />
```

可以将多个源作为逗号所分解的字符串发送. 如果您发送消息源为 `ALL`, JSON 树将会从所有记录的值中创建.

```js
<JsonField source="config1,config2" label="JSON Config" />
```

也可以直接设置JSON文本而不用源道克.

```js
<JsonField json={jsonobj} label="JSON Object" />
```

若为 `treeview` 实值 `false`, JSON 被视为文本,即被调整后可以添加足够的空格使其适合屏幕.

```js
<JsonField json={jsonobj} label="JSON Object" treeview={false} />
```

而且,如果 `togglelabel` 中,将另外显示一个按钮以切换到 `tree` 财务报告和审定财务报表 `text`。 。 。 .

```js
<JsonField json={jsonobj} label="JSON Object" togglelabel="Toggle-View" />
```

若为 `expandlabel` 财务报告和审定财务报表 `collapselabel` 设置中,在 `expand` 财务报告和审定财务报表 `collapse`。 。 。 .

```js
<JsonField
  json={jsonobj}
  label="JSON Object"
  expandlabel="Expand"
  collapselabel="Collapse"
/>
```

# 曲线字段

任意 `TextField` 更多字符可使用 `TrimField`。 。 。 .

```js
<TrimField source="field" label="Trimmed Field" />
```

默认情况下, 将值调整为 30 个字符和附件... 到 .

你可以定制它.

```js
<TrimField source="field" label="Trimmed Field" limit={40} trimstr="...." />
```

# 电子邮件输入

`EmailInput` 用于验证输入的值是否为电子邮件.

```js
<EmailInput source="email" label="Email Address" />
```

您可以将电子邮件限制在特定域上 .

```js
<EmailInput source="email" domains={["yourdomain.com"]} />
```

MULTIPLE允许它取取逗号分离的电子邮件地址. 或者您可以指定分隔符 .

```js
<EmailInput
  source="email"
  domains={["yourdomain.com"]}
  type={EmailTypes.MULTIPLE}
  splitchar=";"
/>
```

如果电子邮件地址无效, 您可以使用 `errortext` 道具 (英语).

**说明 `EmailTypes.ARRAY`**

-   如果您想获得电子邮件地址, 请通过类型为 `EmailTypes.ARRAY`。 。 。 .
-   默认情况下 `EmailInput` 组件被包裹在屏幕上.
-   你可以通过 `wrap={false}` 获取每个 `EmailInput` 一个在另一个下面.
-   “ 电子邮件” 是给阵列的默认标签 。 使用 `grouplabel` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}请重覆这个文件 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}.

# URL 输入

`URLInput` 如果输入的值是有效的URL,则用于验证.

```js
<URLInput source="url" label="URL" />
```

您可以将 URL 限制在特定的域上 .

```js
<URLInput source="url" domains={["yourdomain.com"]} />
```

默认情况下, URL 输入只允许 `https`您可以扩展它用于 `http` 或者说 `ftp`。 。 。 .

```js
<URLInput
  source="url"
  domains={["yourdomain.com"]}
  httpAllowed={true}
  ftpAllowed={true}
/>
```

如果您想要在没有 http 和域名的情况下捕获 API 端点, 您可以使用 `APIEndPoint`。 。 。 . APIENDPoint 允许任何字符串从 `/`。 。 。 .

```js
<URLInput source="url" APIEndPoint={true} />
```

MULTIPLE允许它取取逗号分离的urls. 或者您可以指定分隔符 .

```js
<URLInput
  source="url"
  domains={["yourdomain.com"]}
  type={URLTypes.MULTIPLE}
  splitchar=";"
/>
```

如果 URL 无效, 您可以使用 `errortext` 道具 (英语).

# 电话输入

`PhoneInput` 用于验证输入的数值是否为有效电话号码.

```js
<PhoneInput source="phone" label="Phone Number" />
```

您可使用 `country` 道具 (英语). 这里应该使用两个字母ISO代码.

```js
<PhoneInput source="phone" label="Phone Number" country="IN" />
```

MULTIPLE允许它取取逗号分离的电话号码. 或者您可以指定分隔符 .

```js
<PhoneInput
  source="phone"
  label="Phone Number"
  type={PhoneTypes.MULTIPLE}
  splitchar=";"
/>
```

如果电话号码无效, 您可以使用 `errortext` 道具 (英语).

**说明 `PhoneTypes.ARRAY`**

-   如果你想得到数组电话号码,请通过类型为 `PhoneTypes.ARRAY`。 。 。 .
-   默认情况下 `PhoneInput` 组件被包裹在屏幕上.
-   你可以通过 `wrap` 作为 `false` 获取每个 `PhoneInput` 一个在另一个下面.
-   `Phone Numbers` 是给数组的默认标签。 使用 `grouplabel` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}请重覆这个文件 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}.

# 更新按钮

您可能想要添加一个按钮来更新记录中的特定一栏 . 示例:您可以添加一个按钮来批准一个帖子.

```js
<UpdateButton resource="posts" label="Approve" source="is_approved" />
```

在上述例子中, `is_approved` 栏内 `posts`,将更新到 `true`。 。 。 .

您可以将值道具传递给源代码更新到特定值,而不是 `true`。 。 。 .

```js
<UpdateButton
  resource="posts"
  label="Approve"
  source="post_status"
  value="APPROVED"
/>
```

也可以通过在数据中传递json来更新两个或两个以上的列. 例:批准该员额并更新核定地位

```js
const data = { is_approved: true, post_status: "APPROVED" };
<UpdateButton resource="posts" label="Approve" data={data} />;
```

注:可以发送来源或数据。 如果有源,则数据被忽略.

默认, `UpdateButton` 合并未更新的数据并更新数据,发送整个对象。 如果您的 API 只期望更新数据, 您可以使用合并道具关闭 .

```js
const data = { is_approved: true, post_status: "APPROVED" };
<UpdateButton resource="posts" label="Approve" data={data} merge={false} />;
```

# 许可证

`ra-components` 许可证根据 [MIT 许可证](https://npmcn.com/package/%40bb-tech/ra-components/LICENSE.md),赞助和支持 [大篮子技术](https://tech.bigbasket.com/)。 。 。 .

## 常见问题

### @bb-tech/ra-components 是什么？

反应-admin 4\.x 的额外开源组件

### 如何安装 @bb-tech/ra-components？

在项目目录运行 npm install @bb-tech/ra-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@mui/icons-material（^5\.4\.2）、@mui/material（^5\.0\.0）、@mui/styles（^5\.4\.2）、classnames（^2\.3\.2）、react（^18\.0\.0）、react-admin（^4\.0\.1）、react-dom（^18\.0\.0）、react-json-tree（^0\.16\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bb-tech/ra-components 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bb-tech\_\_ra-components 是否存在。

### @bb-tech/ra-components 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bb-tech/ra-components 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=10\.16。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @bb-tech/ra-components 可以商用吗？

@bb-tech/ra-components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bb-tech/ra-components 的下载量有多少？

根据 npm 官方下载统计，@bb-tech/ra-components 在 2026/10/08 – 2026/11/06 这 30 天内被下载 13,538 次，日均约 451 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bb-tech/ra-components 还在维护吗？

最新版本 2\.0\.6 发布于 2023/05/30（3 年前）；至今共发布 25 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/07/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。