# @careevolution/mydatahelps-ui 中文文档

规范地址：https://npmcn.com/package/%40careevolution/mydatahelps-ui/

版本：4\.5\.0
npm 元数据更新时间：2026-11-04T14:05:25.317Z
中文译文更新时间：2026-11-09T10:26:03.285Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40careevolution/mydatahelps-ui
原文对照：https://npmcn.com/package/%40careevolution/mydatahelps-ui/?lang=original
项目主页：https://github.com/CareEvolution/MyDataHelpsUI#readme
源码仓库：https://github.com/CareEvolution/MyDataHelpsUI

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

- 包体积（解压后）：70.9 MB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：21 个
- peer 依赖：react ^18\.2\.0，react-dom ^18\.2\.0，@careevolution/mydatahelps-js ^5\.9\.1
- 首次发布：2022-09-02T20:56:26.866Z
- 最新版本发布：2026-11-04T14:05:24.965Z
- 近 30 天下载量：2929（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：1131（近 12 个月 167 个）

## 中文简介

MyData帮助用户界面库

## 安装

```sh
npm install @careevolution/mydatahelps-ui
```

也可以使用：`pnpm add @careevolution/mydatahelps-ui`、`yarn add @careevolution/mydatahelps-ui`、`bun add @careevolution/mydatahelps-ui`

## README

# MyData帮助UI

MyDataHelpsUI是一组基于此功能的可重复使用的 React 组件 [MyData帮助.js SDK](https://developer.mydatahelps.org/sdk/)。探索组件库 [(原始内容存档于2018-10-26). ui.mydatahelps.org](https://ui.mydatahelps.org/)。 。 。 .

利用这个组件库来加速开发 [自定义参与者视图](https://developer.mydatahelps.org/views/) 数字临床试验和数字治疗应用 [MyData帮助平台](https://careevolution.com/mydatahelps/)将MyDataHelpsUI纳入参与者的意见中,将有助于你遵循最佳做法,实现结果的回归和eCOA.

你也会发现 [MyDataHelps Startter Kit 数据](https://github.com/CareEvolution/MyDataHelpsStarterKit) 帮助。 启动器套件是一个反应网络应用模板,为您设计,可以将叉/克龙作为开发自定义视图的起点.

通过 :

`npm install @careevolution/mydatahelps-ui`

### 在参与者视图中使用 MyDataHelpsUI 的示例

```
import { Action, Card, Layout, SurveyTaskList } from "@careevolution/mydatahelps-ui"

export default function () {
  return (
    <Layout>
        <Card className='primary-card'>
            <Action
            title="Do you think you have COVID-19?"
            subtitle="It's important to tell us immediately if might have COVID-19.  Click or tap here to report a new infection, symptoms, or close contact."
            onClick={() => MyDataHelps.startSurvey('New COVID Infection')} />
        </Card>
        <Card>
            <SurveyTaskList status="incomplete" title="Tasks" limit={3} />
        </Card>
    </Layout>
    );
```

[专卖局长Care Evolution](https://developer.mydatahelps.org/)

## 故事书

此库使用 [故事书](https://storybook.js.org/). 考察实例,访问 [(原始内容存档于2018-10-26). ui.mydatahelps.org](https://ui.mydatahelps.org/)。 。 。 .

要使用您所测试的 MyDataHelp 参与者的数据来运行故事书预览 :

1.  克隆这个还原
2.  获取一个 [参与者访问令牌](https://developer.mydatahelps.org/sdk/participant_tokens.html) - 使用浏览器dev工具,同时登录为 mydatahelps.org的测试参与者,或者使用 REST API.
    -   提示: 如果使用浏览器 Dev 工具, 请检查请求中的回应 [https://mydatahelps.org/identityserver/connect/token 互联网档案馆的存檔,存档日期2013-12-21](https://mydatahelps.org/identityserver/connect/token)。 。 。 .
3.  在您的根目录中创建 . env 文件, 并附带符号细节 .

```
.env
-----
STORYBOOK_PARTICIPANT_ACCESS_TOKEN=05e211e4df46ca7537e064bde44148a7 
STORYBOOK_PARTICIPANT_ENVIRONMENT_API=https://mydatahelps.org/
```

4.  运行 `npm ci` 以安装依赖.
5.  运行 `npm run storybook` 阅读故事书.

如果您有问题需要运行故事手册, 特别是围绕正在使用的 NODE OPTIONS , 请尝试升级节点到最新版本 .

## 构成部分

这些组成部分分为三类:

### 演示文稿组件

演示文稿组件不获取数据来填充自己 。 它们是UI观点和连通部分的基本构件. 这些都是一些东西,例如按钮,卡片, 和显示一个单一的调查任务.

### 集装箱组件

集装箱组件通过 MyDataHelps.js SDK获取数据. 这些组件只有在MyDataHelps内部的视图中使用,或通过手动将访问令牌传递到SDK时才会起作用.

### 视图

观点将集装箱和演示组件组合起来,形成完全预先建立的经验。 例如,"Home View"包含一个中多个连接组件:

-   项目标题
-   最新通知
-   调查任务
-   项目支助

## 常见问题

### @careevolution/mydatahelps-ui 是什么？

MyData帮助用户界面库

### 如何安装 @careevolution/mydatahelps-ui？

在项目目录运行 npm install @careevolution/mydatahelps-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.2\.0）、react-dom（^18\.2\.0）、@careevolution/mydatahelps-js（^5\.9\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @careevolution/mydatahelps-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @careevolution/mydatahelps-ui 支持 ESM 还是 CommonJS？

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

### @careevolution/mydatahelps-ui 可以商用吗？

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

### @careevolution/mydatahelps-ui 的下载量有多少？

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

### @careevolution/mydatahelps-ui 还在维护吗？

最新版本 4\.5\.0 发布于 2026/11/04（4 天前）；至今共发布 1131 个版本，其中过去 12 个月发布了 167 个；首次发布于 2022/09/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。