React 传送门 Portals

最新推荐文章于 2025-04-24 13:31:40 发布

$(薛定谔的喵)

最新推荐文章于 2025-04-24 13:31:40 发布

阅读量919

点赞数

分类专栏： React 文章标签： react es6 npm reactjs 前端

本文链接：https://blog.csdn.net/Chad97/article/details/103674781

版权

React 专栏收录该内容

23 篇文章

订阅专栏

本文探讨了React的Portal特性，它允许将子组件渲染到父组件之外的DOM节点。通过提供DOM元素作为容器，Portal可以实现跨组件的渲染。文章提到了一个简单的示例，并指出使用Portal时需要注意键盘焦点的管理以及事件冒泡行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

ReactDOM.createPortal(child, container)

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。

简单粗暴小栗子🌰

const Toast:React.FC = (props) => {
    let node = document.createElement('div')
    
    useEffect(() => {
        const app: any = document.querySelector('#tt')
        app.appendChild(node)
        console.log(app)
    }, [node])

    return createPortal((
    <h3>{props.children}</h3>
    ), node);
}