国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > ReactDOM.createPorta

ReactDOM.createPorta

來源:千鋒教育
發布人:zyh
時間: 2023-06-29 13:34:00 1688016840

  `ReactDOM.createPortal`是React的一個API,用于將組件渲染到DOM樹中的不同位置,而不是組件當前所在的位置。

  使用`ReactDOM.createPortal`可以將組件渲染到其他DOM元素的子樹中,這對于在組件層次結構之外的位置渲染內容非常有用,例如模態框、彈出窗口、通知消息等。

  下面是`ReactDOM.createPortal`的基本用法: 

import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
return ReactDOM.createPortal(
children,
document.getElementById('modal-root')
);
};

// 在組件的父組件中使用Modal組件
const App = () => {
return (
<div>
<h1>App Component</h1>
{/* 其他組件 */}
<Modal>
<h2>Modal Content</h2>
</Modal>
</div>

);
};

ReactDOM.render(<App />, document.getElementById('root'));

  在上述示例中,我們定義了一個名為Modal的組件,并使用ReactDOM.createPortal將h2 Modal Content /h2渲染到id為modal-root的DOM元素中。在父組件App中使用Modal將模態框內容渲染出來。

  需要注意的是,ReactDOM.createPortal的第一個參數是要渲染的內容,可以是一個React元素或組件。第二個參數是目標DOM元素,它是一個在DOM中的有效元素,用于指定將內容渲染到哪個位置。

ReactDOM

  通過使用ReactDOM.createPortal,我們可以將組件的渲染范圍擴展到DOM樹的其他位置,從而實現更靈活的渲染和布局控制。

tags: ReactDOM
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT