npm包 react-controllable-renderless使用教程-JavaScript中文网-JavaScript教程资源分享门户

React是一种用于构建用户界面的 JavaScript 库，它成为了前端框架中最流行的一种。提高 React 应用的可控性和可操作性正因为此成为了许多开发人员的首要任务。一个名为 react-controllable-renderless 的 npm 包就是针对这一目标而诞生的。本文将介绍该包的详细使用方法，包括安装、基本用法、参数解释以及实际应用等。

安装

在使用此程序之前，我们需要在命令行工具中运行以下命令来安装该包：

npm install react-controllable-renderless

基本用法

react-controllable-renderless 提供了一个可以控制渲染的 HTML 元素，我们只需要在属性中传递我们需要控制的数据，就可以实现组件控制容器的显示行为。

首先，引入 react-controllable-renderless 包中的 ControllableContainer 组件:

import { ControllableContainer } from 'react-controllable-renderless';

这里需要注意，ControllableContainer 组件仅从该包导入，而不是从 react 包或其他包导入。

然后使用 ControllableContainer 组件来包裹需要控制显示的元素：

<ControllableContainer show={true}>
  <div>Your content here</div>
</ControllableContainer>

以上代码展示了如何通过在外部包装器中设置 show 属性以控制内部包装器的显示。如果 show 的值为 true，内容将被渲染到 DOM 上。如果为 false，则该内容不会被呈现。实际上，ControllableContainer 是一个可控制的“无渲染”容器，它只是渲染它包裹的内容而不是自身。

此外，我们可以使用几个其他属性来控制渲染表现：

duration: 容器的过渡时间，单位为毫秒，默认值为 300 毫秒。
easingFunction: 每次出现和消失时的动画效果，默认值为“ease-in-out”。
transitionProperty: 设定过渡属性，例如“opacity”或“display”。默认为“opacity”。
hideOnOutsideClick: 点击容器之外的元素时是否自动隐藏，默认为 true。
showOnInitialMount: 组件是否在挂载时就展示（而不是在控制器改变时），默认为 true。

例如，可以这样设置：

<ControllableContainer show={true} duration={1000} 
  hideOnOutsideClick={false} showOnInitialMount={false}>
  <div>Your content here</div>
</ControllableContainer>

这将显示包装器，但隐藏其包含的内容。容器将需要另一个组件（如按钮）控制展示。

参数解释

以上列出的属性不是此包唯一的属性集。接下来我们解释一下该npm包的其他属性。

style

Type: object
Default: {}

style 属性是用于指定包装器样式的 JSS 对象。

<ControllableContainer show={true} style={{ color: 'red', backgroundColor: 'yellow' }}>
  <div>Your content here</div>
</ControllableContainer>

以上示例包装器将呈现红色文本并设置黄色背景。

onShow/hide

Arguments: isVisible - 可见性状态 true or false
Default: null

这些回调是用于处理内部包装器是否可见的方法。

const handleShow = isVisible => {
  // Handle visibility...
};

<ControllableContainer show={false} onHide={handleShow} onShow={handleShow}>
  <div>Your content here</div>
</ControllableContainer>

以上示例当包装器被隐藏后，handleShow() 方法将被调用。

stopPropagation

Type: boolean
Default: false

该属性处理元素被单击时事件冒泡的配置。如果为 true，容器将阻止事件冒泡。

<ControllableContainer show={true} stopPropagation>
  <div>Your content here</div>
</ControllableContainer>

如果以上示例中容器被单击，该事件将无法冒泡到其父级 div 中。

示例

最后，让我们看看一个例子，使用 react-controllable-renderless 包包装一个弹出窗口。

首先，要创建点击打开弹出窗口的按钮：

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

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

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

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

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

在此代码中，我们创建处理 popupVisible 状态的 togglePopup() 方法。单击按钮将调用此方法以打开或关闭弹出窗口。

在 ControllableContainer 中设置 show 属性来控制弹出窗口是否显示。单击关闭按钮时，切换弹出窗口的显示状态。

这个包使得渲染反转变为了可能，这很常用于 React 中的许多情况。特别是在与一些复杂的动态可控组件交互时，它尤其有用，你可以使用此方法将它们渲染在一起。

综上所述，react-controllable-renderless 包绝对是新进 React 开发者必须熟悉的 npm 包之一。它提供的一个可控制的低级 HTML 容器使其具有洞见深刻的创新性，这将彻底地改变我们在日常 React 开发中的方法论。

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