美文网首页
React如何将组件渲染到指定节点

React如何将组件渲染到指定节点

作者: 码农私房菜 | 来源:发表于2021-08-19 20:39 被阅读0次

React如何将组件渲染到指定节点—ReactDOM.createPortal(层级覆盖问题处理)

import React, { FC, useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import './index.less'

interface IProps {}

const ProductNum: FC<IProps> = (props: IProps) => {
    const _dispatch: any = useDispatch() || {}
    const { updateField } = _dispatch?.businessDetails
    const { data } = useSelector((state: any) => state.details)
    const el: HTMLElement = document.getElementById('root') as HTMLElement
    useEffect(() => {
        updateField({ count: 12 })
        // eslint-disable-next-line
    }, [isInsurance, deviceSnList])

    return (
        <>
            {ReactDom.createPortal(<div>要渲染的dom</div>,el)
        </>
    )
}

export default ProductNum

相关文章

  • Portals

    Portals React 16的Portals特性让我们可以把组件渲染到当前组件树以外的 DOM节点上,这个特性...

  • React 组件性能优化

    React 组件性能优化最佳实践 React 组件性能优化的核心是减少渲染真实 DOM 节点的频率,减少 Virt...

  • React进阶笔记11(Portals)

    Portals提供了一种能让子节点渲染到父组件之外的方式。 第一个参数(child)是任何可渲染的 React 子...

  • 关于React组件

    渲染React组件 通过ReactDOM直接渲染 通过React.Component创建组件再通过ReactDOM...

  • react portal

    React Portal Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法...

  • # Portals

    插槽:将一个react元素渲染到指定的DOM容器中 ReactDOM.createPortal(React 元素,...

  • 25 常见问题

    HTML/React/Vue节点渲染出错 1 .这些节点内容都是渲染在SVG的foreignObject节点内部....

  • 面试题

    React组件的渲染流程是什么? 使用 React.createElement或 JSX编写 React组件,实际...

  • React 渲染机制

    React 渲染过程 在使用 React 构建应用时,总有一个步骤是将组件 / 虚拟 DOM 树渲染到真实的 DO...

  • React相关问题

    一.react生命周期 1.组件载入阶段: componentWillMount:组件即将被装载、渲染到页面上,只...

网友评论

      本文标题:React如何将组件渲染到指定节点

      本文链接:https://www.haomeiwen.com/subject/whozbltx.html