npm包 react-controllable-renderless使用教程

阅读时长 6 分钟读完

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

纠错
反馈