rc-trigger-es6 是一个基于 React 的轻量级触发器组件，可以用来实现各种常见的浮层（pop-over）交互。本文将介绍这个 npm 包的使用方法，包括安装、配置和示例代码等。
安装
使用 npm 安装 rc-trigger-es6：
npm install rc-trigger-es6 --save
配置
为了使用 rc-trigger-es6，您需要在您的组件中引入它并配置相关属性。以下是一个简单的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ---- -----------------
----- ----------- ------- --------- -
----- - -
-------- ------
-
---------------- - --------- -- -
--------------- ------- ---
-
-------- -
----- - ------- - - -----------
------ -
--------
------------ -------
-----------------
--------------------------------------------
-
-------------- --------------
----------
--
-
-在这个示例中，我们创建了一个组件（MyComponent），其中包含一个按钮和一个触发器组件。当用户单击按钮时，触发器会显示一个简单的弹出层（pop-over）。该弹出层的文本为 "Hello World!"，触发器的可见性由 state 中的 visible 属性管理。
属性
下表列出了 rc-trigger-es6 支持的属性及其描述：
| 属性 | 类型 | 必须 | 默认值 | 描述 |
|---|---|---|---|---|
| popup | ReactElement or node | 是 | null | 弹出层内容 |
| visible | boolean | 是 | false | 是否显示弹出层 |
| onPopupClose | function | 否 | noop | 弹出层关闭时的回调函数 |
| onPopupVisibleChange | function | 否 | noop | 弹出层可见性变化时的回调函数 |
| getPopupContainer | function | 否 | () => document.body | 获取弹出层的容器 |
| getTriggerDOMNode | function | 否 | () => this.triggerNode | 获取触发器 DOM 节点 |
| align | object | 否 | 默认对齐方式 | 弹出层对齐方式 |
更详细的属性文档可以参考 rc-trigger。
更复杂的示例
接下来，我们将介绍如何使用 rc-trigger-es6 实现一个类似微信公众号菜单的复杂浮层组件。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- -------------
------ ------- ---- -----------------
------ --------------
----- ----- - -
-
----- ------
---- --------------------
--
-
----- ------
--------- -
-
----- -------
---- --------------------
--
-
----- -------
---- --------------------
-
-
--
-
----- ------
---- --------------------
--
--
----- ------- ------- --------- -
----- - -
-------- ------
-
---------------- - --------- -- -
--------------- ------- ---
-
---------------- -
-- --------------- -
------ -
--- ----------------
-- ------------------------
----
-------------------------- -- --------------------------
-----
-----
--
- ---- -
------ -
--- ----------------
-- -------------------------------
-----
--
-
-
-------- -
----- - ------- - - -----------
------ -
---- ------------------------------
--------
---------------------------
-----------------
--------------------------------------------
-------------
------- ------ ------
------- --- ----
--
-
-------
------------------------------------ - ------- ------- ---
---------------- -- ----------------------------
---------------- -- -----------------------------
-
-- --------------------------
---------
---- -------------------------
--- ----------------------
--------------- -- -----------------------
-----
------
----------
------
--
-
-在这个示例中，我们使用了更多的属性来定制 Trigger 的外观和行为。我们自定义了弹出层容器的类名、弹出层对齐方式、触发器按钮的交互方式以及菜单的渲染方式。同时，我们还使用了 classnames 库来方便地处理按钮的样式。
结论
rc-trigger-es6 提供了一个轻量级、易于使用的组件来实现各种常见的浮层交互。使用它可以减少开发人员的工作量，提高生产力。本文介绍了这个 npm 包的安装、配置和示例代码，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005640b81e8991b448e1492