createPortal 的調(diào)用方式是：
ReactDOM.createPortal(child, container)
第一個參數(shù)是一個 renderable React child
第二個參數(shù)是一個DOM元素
將index.html頁面添加DOM節(jié)點來驗證createPortal如何渲染
<div id="root"></div>
<div id="another-root"></div>
<div id="another-container"></div>
大白話的意思是：
通過createPortal渲染的元素會被添加到另外的節(jié)點啸如，同時點擊事件會被觸發(fā)胳蛮；
而通過ReactDOM.render渲染的元素添加到新節(jié)點火脉，但是點擊事件沒有觸發(fā)。
image.png
import React from 'react';
import ReactDOM, { createPortal } from 'react-dom';
class HelloFromPortal extends React.Component {
render(){
return (
<div onClick={() => {alert("我爸應該知道我被點擊了")}}>
我是傳送門里出來的Portal
</div>
)
}
}
class AmISameAsPortal extends React.Component {
render() {
return(
<div onClick={() => {alert("是不是從傳送門里出來呢森瘪？ 我媽應該知道我被點擊了")}}>
是不是從傳送門里出來呢？ not Portal
</div>
)
}
}
class HelloReact extends React.Component {
render(){
return (
<div>
<h1>父組件</h1>
<div onClick={() => {alert('YES Dispaly')}}>
{createPortal(<HelloFromPortal />, document.getElementById('another-root'))}
</div>
XXXX
XXXX
<div onClick={() => {alert("No display")}}>
{ReactDOM.render(<AmISameAsPortal />, document.getElementById('another-container'))}
</div>
</div>
)
}
}
ReactDOM.render(<HelloReact />, document.getElementById('root'));
