React是一种用于构建用户界面的 JavaScript 库，它成为了前端框架中最流行的一种。提高 React 应用的可控性和可操作性正因为此成为了许多开发人员的首要任务。一个名为 react-controllable-renderless 的 npm 包就是针对这一目标而诞生的。本文将介绍该包的详细使用方法，包括安装、基本用法、参数解释以及实际应用等。
安装
在使用此程序之前，我们需要在命令行工具中运行以下命令来安装该包：
npm install react-controllable-renderless
基本用法
react-controllable-renderless 提供了一个可以控制渲染的 HTML 元素，我们只需要在属性中传递我们需要控制的数据，就可以实现组件控制容器的显示行为。
首先，引入 react-controllable-renderless 包中的 ControllableContainer 组件:
------ - --------------------- - ---- --------------------------------
这里需要注意，ControllableContainer 组件仅从该包导入，而不是从 react 包或其他包导入。
然后使用 ControllableContainer 组件来包裹需要控制显示的元素：
---------------------- ------------ --------- ------- ---------- ------------------------
以上代码展示了如何通过在外部包装器中设置 show 属性以控制内部包装器的显示。如果 show 的值为 true，内容将被渲染到 DOM 上。如果为 false，则该内容不会被呈现。实际上，ControllableContainer 是一个可控制的“无渲染”容器，它只是渲染它包裹的内容而不是自身。
此外，我们可以使用几个其他属性来控制渲染表现：
duration: 容器的过渡时间，单位为毫秒，默认值为 300 毫秒。easingFunction: 每次出现和消失时的动画效果，默认值为“ease-in-out”。transitionProperty: 设定过渡属性，例如“opacity”或“display”。默认为“opacity”。hideOnOutsideClick: 点击容器之外的元素时是否自动隐藏，默认为 true。showOnInitialMount: 组件是否在挂载时就展示（而不是在控制器改变时），默认为 true。
例如，可以这样设置：
---------------------- ----------- --------------- -------------------------- --------------------------- --------- ------- ---------- ------------------------
这将显示包装器，但隐藏其包含的内容。容器将需要另一个组件（如按钮）控制展示。
参数解释
以上列出的属性不是此包唯一的属性集。接下来我们解释一下该npm包的其他属性。
style
- Type: object
- Default: {}
style 属性是用于指定包装器样式的 JSS 对象。
---------------------- ----------- -------- ------ ------ ---------------- -------- --- --------- ------- ---------- ------------------------
以上示例包装器将呈现红色文本并设置黄色背景。
onShow/hide
- Arguments:
isVisible- 可见性状态 true or false - Default: null
这些回调是用于处理内部包装器是否可见的方法。
----- ---------- - --------- -- - -- ------ ------------- -- ---------------------- ------------ ------------------- -------------------- --------- ------- ---------- ------------------------
以上示例当包装器被隐藏后，handleShow() 方法将被调用。
stopPropagation
- Type: boolean
- Default: false
该属性处理元素被单击时事件冒泡的配置。如果为 true，容器将阻止事件冒泡。
---------------------- ----------- ---------------- --------- ------- ---------- ------------------------
如果以上示例中容器被单击，该事件将无法冒泡到其父级 div 中。
示例
最后，让我们看看一个例子，使用 react-controllable-renderless 包包装一个弹出窗口。
首先，要创建点击打开弹出窗口的按钮：
------ ------ - -------- - ---- --------
------ - --------------------- - ---- --------------------------------
----- ----- - -- -- -
----- -------------- ---------------- - ----------------
----- ----------- - -- -- -
-------------------------------
--
------ -
--
------- -----------------------------------
---------------------- ------------------- -------- --------- ----------- ---- --- ----- -- ---
---- -------- -------- --- ---------------- ------- ------------- -- ---------- ---- --- ---- ----- ---
--------- ----- ---------
---
--- ------- --- --- ----- ---- -----
----
------- ------------------------------------
------
------------------------
---
--
-在此代码中，我们创建处理 popupVisible 状态的 togglePopup() 方法。单击按钮将调用此方法以打开或关闭弹出窗口。
在 ControllableContainer 中设置 show 属性来控制弹出窗口是否显示。单击关闭按钮时，切换弹出窗口的显示状态。
这个包使得渲染反转变为了可能，这很常用于 React 中的许多情况。特别是在与一些复杂的动态可控组件交互时，它尤其有用，你可以使用此方法将它们渲染在一起。
综上所述，react-controllable-renderless 包绝对是新进 React 开发者必须熟悉的 npm 包之一。它提供的一个可控制的低级 HTML 容器使其具有洞见深刻的创新性，这将彻底地改变我们在日常 React 开发中的方法论。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005729381e8991b448e8c67