前言
随着 Slack 在团队中的使用越来越广泛，嵌入式 Slack 的需求也越来越大。Embedded-Slack-React 是一款专门为 React 应用设计的 Slack 嵌入式组件。在本文中，我们将向您介绍如何使用此 NPM 包来构建嵌入式 Slack 应用。
安装
在终端中使用以下命令来安装 Embedded-Slack-React NPM 包：
npm install embedded-slack-react --save
使用
在你的 React 组件中，你可以使用以下代码来添加 Embedded-Slack-React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------------
-------- ------------- -
------ -
--------------
------------------
----------------------
-----------------------
------------
--
--
-
------ ------- ------------在这个例子中，我们使用了 <EmbeddedSlack> 标签来添加嵌入式 Slack 应用。我们提供了 slackToken 和 slackChannel 来访问我们想要嵌入到我们的应用程序中的 Slack。我们还提供了 initialMessage 属性来在第一次加载 Slack 应用时显示消息。最后，我们还定义了应用程序的高度为500，这是可选的。
详解
在上面的示例中，我们展示了如何在 React 中使用嵌入式 Slack 应用。现在，让我们更深入地了解一些 Embeded-Slack-React 的更高级用法。
在嵌入式 Slacks 应用中加载其他组件
在有些情况下，你可能需要在嵌入式 Slack 中加载其他组件。例如，你可能想要使用一个 react-bootstrap 组件来突出显示消息。在 Embedded-Slack-React 中，我们可以轻松地实现这一点。为了在 Socket Messenger 中加载其他组件，你需要使用一个叫“openSocket”的选项。此选项将允许你访问原始的 Slack Websocket，并将可以使用已添加的其他组件。
在以下示例中，我们使用 React-Bootstrap 的 Row 和 Col 组件将 Slack 消息包装在一个漂亮的表格中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- --- - ---- ------------------
------ ------------- ---- -----------------------
-------- ------------- -
----- --------------- ----------------- - -------------
-- -------- ----- --
------------ -- -
----- ------ - ------------------
-------------------- ------- -- -
-------------------------- -- -------------- ----------
---
-- ----
------ -
--------------
------------------
----------------------
-----------------------
------------
------------------ -- -
-- - --------- ------ ----- --------
------------------------ -- -
-------------------------- -- -------------- ----------
---
-- -- --------------- --- -------------
------------------- -- -
----- ---- - -------------------- ---- -- ------ -- -
---- ------------
-----------------
------
---
------ ------------
---
--
--
--
-
------ ------- ------------这里，我们定义了一些状态来存储 Slack 消息。我们然后使用 useEffect() 来定义在初始加载时获取 Slack 消息的方法。通过向 <EmbeddedSlack> 组件添加一个有openSocket 属性的回调函数，我们可以访问 Socket Messenger，并在消息到达时将 Slack 消息添加到我们的状态数组中。然后，在消息到达时，我们使用 React-Bootstrap 来格式化消息，将其包装在漂亮的表格中。
自定义加载动画
你可能想为你的嵌入式 Slack 应用程序添加一个自定义加载动画，这样在 Slack 加载之前就有了动画。为此，我们可以添加一个 Loading 组件。下面的示例演示了如何实现此功能：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- - ---- ------------------
------ ------------- ---- -----------------------
-------- ------------- -
----- ----------- ------------- - ---------------
-- - ----- --------- --------- - -----
-------- -------- -
--------------------
-
------ -
--
---------- -- -
----
--------
--------- --------
---- ------
----- ------
---------- ---------------- -------
------- -------
--
-
-------- ------------------ --------------- --
------
--
--------------
------------------
----------------------
-----------------------
------------
---------------
--
---
--
-
------ ------- ------------这里，我们定义了一个状态来追踪加载状态。同时，我们添加一个 <Spinner> 组件来表示加载。我们然后将 isLoading 属性添加到我们的组件中，以确定何时显示 Spinner。最后，我们将 onLoad 回调函数添加到我们的 EmbeddedSlack 组件中，在 Slack 应用加载完成时调用此函数，将 isLoading 置为 false。
结论
在本文中，我们深入地研究了嵌入式 Slack 应用程序，并介绍了如何使用 Embedded-Slack-React NPM 包在 React 应用程序中添加嵌入式 Slack 应用程序。我们还介绍了更高级的用例，如使用 Websocket 加载其他组件和自定义加载动画。通过理解嵌入式 Slack 应用程序的工作原理和使用 Embedded-Slack-React NPM 包，我们可以大大简化开发过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554b281e8991b448d1e85