使用 React createPortal 掌握模态、工具提示等

在 React 中创建模态和工具提示通常很复杂，难以设计样式，并会​​导致许多样式错误。
createPortal api 简化了这个过程，允许在主 DOM 之外渲染组件，从而简化样式设计和可维护性。在这篇文章中，我们将学习如何使用此工具在 React 中以正确的方式创建模式和工具提示。

了解 createPortal api

createPortal 是 React 内置函数，允许您在 DOM 的不同部分渲染组件。它对于构建特别有用：模态和叠加、第三方组件和自定义 UI 元素。

它是如何运作的

入口用于组件的返回语句内，它仅更改 DOM 节点的物理位置。这就像将 DOM 节点传送到主 DOM 树之外。 createPortal API 访问两个参数和第三个可选参数：

• Children：任何可以用 React、div、组件或 React 片段渲染的东西。
• domNode：这是要放置子级的位置。
• key（可选）：用作门户密钥的唯一数字或字符串。

如果我们假设我们在组件 A 中创建一个门户并在组件 B 中渲染它，则门户的子级将访问组件 A 的所有状态和变量，并在组件 A 中渲染时像在组件 A 中一样运行B、

创建和使用门户

在下面的示例中，门户用于传送接受状态的组件 Child 并将该组件移动到主体。

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    <div>
      <p> ... </p>
      createPoratl(
        <Child state={state} />,
        document.body
      )
    </div>
  )
}

export default App

现在子组件将在 HTML 中的 body 标签中呈现。

结论

createPortal 是 React 中一个很有价值的工具，用于创建模式、工具提示和其他需要在主 DOM 树之外渲染的组件。通过使用此工具，您可以实现这些元素的更清晰、更灵活、更高效的方法。

以上是使用 React createPortal 掌握模态、工具提示等的详细内容。更多信息请关注PHP中文网其他相关文章！