npm 包 @atlaskit/activity-provider 使用教程-JavaScript中文网-JavaScript教程资源分享门户

@atlaskit/activity-provider 是一个适用于 React 应用程序的 npm 包，它提供了一个使用起来非常方便的组件库，帮助开发人员轻松集成与 Atlassian Cloud 平台相关的活动记录和用户数据。

本篇文章将提供一个基于 @atlaskit/activity-provider 的实际使用案例，以便读者能够更好地理解其使用方法，具备丰富的实践经验，同时也能为开发者提供指导性的建议。

前置要求

在开始本文的教程内容之前，请确保您已经满足以下条件：

了解 React.js 并具备实践经验；
安装并配置了 Node.js 和 npm（建议使用最新版本）；
了解基本的 JavaScript 语法和 ES6 语法规范。

安装 @atlaskit/activity-provider

您可以直接在项目根目录中运行以下命令来安装 @atlaskit/activity-provider：

npm install @atlaskit/activity-provider --save

在安装 @atlaskit/activity-provider 过程中需要注意的是，此包依赖于以下三个其他的包：

react
react-dom
styled-components

在安装完成后，您可以在项目中导入 @atlaskit/activity-provider：

import ActivityProvider from "@atlaskit/activity-provider";

使用 @atlaskit/activity-provider

@atlaskit/activity-provider 提供了一个统一的入口，帮助我们轻松地集成许多 Atlassian 平台的功能。在这个入口下，每个功能都有一个专门的 React 组件。

1. 使用 ActivityProvider 组件

ActivityProvider 组件是 @atlaskit/activity-provider 的核心组件之一，它以 <ActivityProvider> 标签的形式实现，并且是必须的。

您需要给 ActivityProvider 组件传递一个名为 "cloudId" 的 props，该 props 表示 Atlassian 平台的 cloudId。cloudId 是一个在 Atlassian 平台上唯一标识租户的值，您需要从 Atlassian 开发者控制台上获取。

-- -------------------- ---- -------
------ - ---------------- - ---- ------------------------------

----- ------- - ----------------

----- ------- - -- -- -
  ------ -
    ----------------- ------------------
      --- ----------- ---
    -------------------
  --
--

2. 使用 componentRefs 属性

componentRefs 是另一个必需的属性，它表示可在 ActivityProvider 组件下使用的所有 Atlassian 组件的集合，并以以下方式传递：

-- -------------------- ---- -------
----- ------------- - -
  ----------------- -
    ------------------- -
      --------- ----------------------
    --
    ---------------------- ----------------------
    ------------------------ -
      --------- ---------------------------
    -
  -
--

上面的 componentRefs 示例显示了如何创建一个集合，该集合包含三个 Atlassian 组件：

urlPreviewProvider：用于自动获取 URL 预览信息，例如链接的标题、摘要和域名等信息；
notificationIndicator：用于显示新通知的数量；
notificationLogProvider：用于访问用户的通知日志。

3. 使用 UrlPreviewProviderImpl 组件

UrlPreviewProviderImpl 组件用于从 Atlassian 平台中获取 URL 预览信息，可以通过 import 引入该组件：

import { UrlPreviewProviderImpl } from "@atlaskit/activity-provider";

然后，您可以像这样使用 UrlPreviewProviderImpl 组件：

const myUrlPreviewProvider = new UrlPreviewProviderImpl(cloudId, personAuthProvider);

其中，personAuthProvider 实例是表示一个 Atlassian Cloud 用户授权的对象，并且是 @atlaskit/activity-provider 可用的所有身份验证器之一。

4. 使用 NotificationIndicator 组件

NotificationIndicator 组件用于显示新通知的数量，可以通过 import 引入该组件：

import { NotificationIndicator } from "@atlaskit/activity-provider";

然后您可以像这样使用 NotificationIndicator 组件：

const notificationIndicator = <NotificationIndicator />;

5. 使用 NotificationLogProviderImpl 组件

NotificationLogProviderImpl 组件用于访问用户的通知日志，可以通过 import 引入该组件：

import { NotificationLogProviderImpl } from "@atlaskit/activity-provider";

然后，您可以像这样使用 NotificationLogProviderImpl 组件：

const myNotificationLogProvider = new NotificationLogProviderImpl(
  cloudId,
  personAuthProvider
);

完整示例代码

下面是一个完整的示例代码，演示了如何使用 @atlaskit/activity-provider 和其相关组件：

-- -------------------- ---- -------
------ ----- ---- --------
------ -
  -----------------
  -----------------------
  ----------------------
  ---------------------------
- ---- ------------------------------

----- ------- - ----------------

----- ------------- - -
  ----------------- -
    ------------------- -
      --------- ----------------------
    --
    ---------------------- ----------------------
    ------------------------ -
      --------- ---------------------------
    -
  -
--

----- ------------------ - ---

----- -------------------- - --- ------------------------------- --------------------
----- --------------------- - ---------------------- ---
----- ------------------------- - --- ----------------------------
  --------
  ------------------
--

----- ------- - -- -- -
  ------ -
    -----------------
      -----------------
      -----------------------------
      -----------------------------------------
      ---------------------------------------------
      ---------------------------------------------------
    -
      --- ----------- ---
    -------------------
  --
--

------ ------- --------

总结

本文提供了一个完整的 @atlaskit/activity-provider 使用教程，内容详细且具备指导性和深度，同时提供了一些实际的示例代码和操作建议，以帮助前端开发者更好地理解和使用该 npm 包。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f73bffda9b7065299ccbc3a

npm 包 @atlaskit/activity-provider 使用教程