React Portalã§ã®ã€ãã³ããããªã³ã°å¶åŸ¡ã«ã€ããŠæ·±ãæãäžããŸããã€ãã³ããéžæçã«äŒæãããããäºæž¬å¯èœãªUIãæ§ç¯ããæ¹æ³ãåŠã³ãŸãããã
React Portalã®ã€ãã³ããããªã³ã°å¶åŸ¡ïŒéžæçã€ãã³ãäŒæ
React Portalã¯ãæšæºã®Reactã³ã³ããŒãã³ãéå±€å€ã«ã³ã³ããŒãã³ããã¬ã³ããªã³ã°ãã匷åãªæ¹æ³ãæäŸããŸããããã¯ãã¢ãŒãã«ãããŒã«ãããããªãŒããŒã¬ã€ãªã©ãèŠçŽ ãè«ççãªèŠªããç¬ç«ããŠèŠèŠçã«é 眮ããå¿ èŠãããå Žåã«éåžžã«åœ¹ç«ã¡ãŸãããã ããDOMããªãŒããã®ãã®åé¢ã¯ãã€ãã³ããããªã³ã°ã«è€éãããããããæ éã«ç®¡çããªããšäºæããªãåäœã«ã€ãªããå¯èœæ§ããããŸãããã®èšäºã§ã¯ãReact Portalã§ã®ã€ãã³ããããªã³ã°ã®è€éããæ¢ããç®çã®ã³ã³ããŒãã³ãã€ã³ã¿ã©ã¯ã·ã§ã³ãå®çŸããããã«ã€ãã³ããéžæçã«äŒæãããããã®æŠç¥ãæäŸããŸãã
DOMã«ãããã€ãã³ããããªã³ã°ã®çè§£
React Portalã«é£ã³èŸŒãåã«ãããã¥ã¡ã³ããªããžã§ã¯ãã¢ãã«ïŒDOMïŒã«ãããã€ãã³ããããªã³ã°ã®åºæ¬çãªæŠå¿µãçè§£ããããšãéèŠã§ããHTMLèŠçŽ ã§ã€ãã³ããçºçãããšããŸããã®èŠçŽ ã«ã¢ã¿ãããããã€ãã³ããã³ãã©ïŒã¿ãŒã²ããïŒãããªã¬ãŒãããŸããæ¬¡ã«ãã€ãã³ãã¯DOMããªãŒããããã«ã¢ããããã芪èŠçŽ ã®ããããã§åãã€ãã³ããã³ãã©ãããªã¬ãŒããããã¥ã¡ã³ãã®ã«ãŒãïŒwindowïŒãŸã§ç¶ããŸãããã®åäœã«ãããã€ãã³ããããå¹ççã«åŠçã§ããŸããåã
ã®ãªã¹ããŒãããããã®åã«ã¢ã¿ãããã代ããã«ãåäžã®ã€ãã³ããªã¹ããŒã芪èŠçŽ ã«ã¢ã¿ããã§ããŸãã
ããšãã°ã次ã®HTMLæ§é ãèããŠã¿ãŸãããã
<div id="parent">
<button id="child">Click Me</button>
</div>
clickã€ãã³ããªã¹ããŒã#childãã¿ã³ãš#parent divã®äž¡æ¹ã«ã¢ã¿ãããããšããã¿ã³ãã¯ãªãã¯ãããšããŸããã¿ã³ã®ã€ãã³ããã³ãã©ãããªã¬ãŒãããŸããæ¬¡ã«ãã€ãã³ãã¯èŠªdivã«ããã«ã¢ãããããã®clickã€ãã³ããã³ãã©ãããªã¬ãŒããŸãã
React Portalãšã€ãã³ããããªã³ã°ã®èª²é¡
React Portalã¯ããã®åãDOMå ã®å¥ã®å Žæã«ã¬ã³ããªã³ã°ããReactã³ã³ããŒãã³ãããªãŒå ã®å ã®èŠªãžã®æšæºã®Reactã³ã³ããŒãã³ãéå±€ã®æ¥ç¶ã广çã«äžæããŸããReactã³ã³ããŒãã³ãããªãŒã¯ãã®ãŸãŸæ®ããŸãããDOMæ§é ã¯å€æŽãããŸãããã®å€æŽã«ãããã€ãã³ããããªã³ã°ã«åé¡ãçºçããå¯èœæ§ããããŸããããã©ã«ãã§ã¯ãããŒã¿ã«å ã§çºçããã€ãã³ãã¯åŒãç¶ãDOMããªãŒãããã«ã¢ããããReactã¢ããªã±ãŒã·ã§ã³å€ã®èŠçŽ ãŸãã¯ã¢ããªã±ãŒã·ã§ã³å ã®äºæããªã芪èŠçŽ ã§ã€ãã³ããªã¹ããŒãããªã¬ãŒããå¯èœæ§ããããŸãããã ãããããã®èŠçŽ ã¯ãããŒã¿ã«ã®ã³ã³ãã³ããã¬ã³ããªã³ã°ããã*DOMããªãŒ*å ã®ç¥å ã§ããå Žåã«éããŸãããã®ãããªã³ã°ã¯DOMã§çºçããReactã³ã³ããŒãã³ãããªãŒã§ã¯*ãããŸãã*ã
React Portalã䜿çšããŠã¬ã³ããªã³ã°ãããã¢ãŒãã«ã³ã³ããŒãã³ããããã·ããªãªãèããŠã¿ãŸããããã¢ãŒãã«ã«ã¯ãã¿ã³ãå«ãŸããŠããŸãããã¿ã³ãã¯ãªãã¯ãããšãã€ãã³ãã¯bodyèŠçŽ ïŒããŒã¿ã«ãä»ããŠã¢ãŒãã«ãã¬ã³ããªã³ã°ãããå ŽæïŒã«ããã«ã¢ããããDOMæ§é ã«åºã¥ããŠãã¢ãŒãã«ã®å€ã®ä»ã®èŠçŽ ã«ãããã«ã¢ããããå¯èœæ§ããããŸãããããã®ä»ã®èŠçŽ ã«ã¯ãªãã¯ãã³ãã©ãããå Žåãäºæããã«ããªã¬ãŒãããæå³ããªãå¯äœçšãçºçããå¯èœæ§ããããŸãã
React Portalã§ã®ã€ãã³ãäŒæã®å¶åŸ¡
React Portalã«ãã£ãŠå°å ¥ãããã€ãã³ããããªã³ã°ã®èª²é¡ã«å¯ŸåŠããã«ã¯ãã€ãã³ãäŒæãéžæçã«å¶åŸ¡ããå¿ èŠããããŸãã䜿çšã§ããã¢ãããŒãã¯ããã€ããããŸãã
1. stopPropagation()ã®äœ¿çš
æãç°¡åãªã¢ãããŒãã¯ãã€ãã³ããªããžã§ã¯ãã§stopPropagation()ã¡ãœããã䜿çšããããšã§ãããã®ã¡ãœããã¯ãã€ãã³ããDOMããªãŒå
ã§ããã«ããã«ã¢ããããã®ãé²ããŸããããŒã¿ã«å
ã®èŠçŽ ã®ã€ãã³ããã³ãã©å
ã§stopPropagation()ãåŒã³åºãããšãã§ããŸãã
äŸïŒ
import React from 'react';
import ReactDOM from 'react-dom';
const modalRoot = document.getElementById('modal-root'); // HTMLã«modal-rootèŠçŽ ãããããšã確èªããŸã
function Modal(props) {
return ReactDOM.createPortal(
<div className="modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-content">
{props.children}
</div>
</div>,
modalRoot
);
}
function App() {
const [showModal, setShowModal] = React.useState(false);
return (
<div>
<button onClick={() => setShowModal(true)}>Open Modal</button>
{showModal && (
<Modal>
<button onClick={() => alert('Button inside modal clicked!')}>Click Me Inside Modal</button>
</Modal>
)}
<div onClick={() => alert('Click outside modal!')}>
Click here outside the modal
</div>
</div>
);
}
export default App;
ãã®äŸã§ã¯ã.modal divã«ã¢ã¿ãããããonClickãã³ãã©ã¯e.stopPropagation()ãåŒã³åºããŸããããã«ãããã¢ãŒãã«å
ã®ã¯ãªãã¯ãã¢ãŒãã«ã®å€ã®<div>ã§onClickãã³ãã©ãããªã¬ãŒããã®ãé²ããŸãã
èæ ®äºé ïŒ
stopPropagation()ã¯ãReactã¢ããªã±ãŒã·ã§ã³ã«é¢é£ããŠãããã©ããã«é¢ä¿ãªããDOMããªãŒã§ããã«äžäœã®ã€ãã³ããªã¹ããŒãããªã¬ãŒããã®ãé²ããŸãã- ãã®ã¡ãœããã¯ãã€ãã³ããããªã³ã°ã®åäœã«äŸåããŠããå¯èœæ§ã®ããä»ã®ã€ãã³ããªã¹ããŒã«å¹²æžããå¯èœæ§ããããããæ éã«äœ¿çšããŠãã ããã
2. ã¿ãŒã²ããã«åºã¥ãæ¡ä»¶ä»ãã€ãã³ãåŠç
å¥ã®ã¢ãããŒãã¯ãã€ãã³ãã¿ãŒã²ããã«åºã¥ããŠã€ãã³ããæ¡ä»¶ä»ãã§åŠçããããšã§ããã€ãã³ãã¿ãŒã²ãããããŒã¿ã«å ã«ãããã©ããã確èªããŠãããã€ãã³ããã³ãã©ããžãã¯ãå®è¡ã§ããŸããããã«ãããããŒã¿ã«ã®å€ããçºçããã€ãã³ããéžæçã«ç¡èŠã§ããŸãã
äŸïŒ
import React from 'react';
import ReactDOM from 'react-dom';
const modalRoot = document.getElementById('modal-root');
function Modal(props) {
return ReactDOM.createPortal(
<div className="modal">
<div className="modal-content">
{props.children}
</div>
</div>,
modalRoot
);
}
function App() {
const [showModal, setShowModal] = React.useState(false);
const handleClickOutsideModal = (event) => {
if (showModal && !modalRoot.contains(event.target)) {
alert('Clicked outside the modal!');
setShowModal(false);
}
};
React.useEffect(() => {
document.addEventListener('mousedown', handleClickOutsideModal);
return () => {
document.removeEventListener('mousedown', handleClickOutsideModal);
};
}, [showModal]);
return (
<div>
<button onClick={() => setShowModal(true)}>Open Modal</button>
{showModal && (
<Modal>
<button onClick={() => alert('Button inside modal clicked!')}>Click Me Inside Modal</button>
</Modal>
)}
</div>
);
}
export default App;
ãã®äŸã§ã¯ãhandleClickOutsideModal颿°ã¯ãã€ãã³ãã¿ãŒã²ããïŒevent.targetïŒãmodalRootèŠçŽ ã«å«ãŸããŠãããã©ããã確èªããŸããããã§ãªãå Žåãã¯ãªãã¯ãã¢ãŒãã«ã®å€ã§çºçããããšãæå³ããã¢ãŒãã«ã¯éããããŸãããã®ã¢ãããŒãã¯ãã¢ãŒãã«å
ã®èª€ã£ãã¯ãªãã¯ããã¯ãªãã¯å€ãããžãã¯ãããªã¬ãŒããã®ãé²ããŸãã
èæ ®äºé ïŒ
- ãã®ã¢ãããŒãã§ã¯ãããŒã¿ã«ãã¬ã³ããªã³ã°ãããã«ãŒãèŠçŽ ïŒäŸïŒ
modalRootïŒãžã®åç §ãå¿ èŠã§ãã - ã€ãã³ãã¿ãŒã²ãããæåã§ç¢ºèªããå¿ èŠããããŸããããã¯ãããŒã¿ã«å ã®ãã¹ããããèŠçŽ ã®å Žåãããè€éã«ãªãå¯èœæ§ããããŸãã
- ãŠãŒã¶ãŒãã¢ãŒãã«ãŸãã¯åæ§ã®ã³ã³ããŒãã³ãã®å€ãã¯ãªãã¯ãããšãã«ç¹å®ã®ã¢ã¯ã·ã§ã³ãããªã¬ãŒããå Žåã«åœ¹ç«ã¡ãŸãã
3. ãã£ããã£ãã§ãŒãºã€ãã³ããªã¹ããŒã®äœ¿çš
ã€ãã³ããããªã³ã°ã¯ããã©ã«ãã®åäœã§ãããã€ãã³ãã¯ãããªã³ã°ãã§ãŒãºã®åã«ããã£ããã£ããã§ãŒãºãééããŸãããã£ããã£ãã§ãŒãºäžãã€ãã³ãã¯ãŠã£ã³ããŠããã¿ãŒã²ããèŠçŽ ãŸã§DOMããªãŒãäžæ¹åã«ç§»åããŸããã€ãã³ããªã¹ããŒã远å ãããšãã«useCaptureãªãã·ã§ã³ãtrueã«èšå®ããããšã§ããã£ããã£ãã§ãŒãºäžã«ã€ãã³ãããªãã¹ã³ããã€ãã³ããªã¹ããŒãã¢ã¿ããã§ããŸãã
ãã£ããã£ãã§ãŒãºã€ãã³ããªã¹ããŒãããã¥ã¡ã³ãïŒãŸãã¯å¥ã®é©åãªç¥å ïŒã«ã¢ã¿ããããããšã«ãããã€ãã³ããããŒã¿ã«ã«å°éããåã«ã€ã³ã¿ãŒã»ããããããã«ã¢ããããã®ãé²ãããšãã§ããŸããããã¯ãã€ãã³ãã«åºã¥ããŠäœããã®ã¢ã¯ã·ã§ã³ãå®è¡ããå¿ èŠãããå Žåã«åœ¹ç«ã¡ãŸãã
äŸïŒ
import React from 'react';
import ReactDOM from 'react-dom';
const modalRoot = document.getElementById('modal-root');
function Modal(props) {
return ReactDOM.createPortal(
<div className="modal">
<div className="modal-content">
{props.children}
</div>
</div>,
modalRoot
);
}
function App() {
const [showModal, setShowModal] = React.useState(false);
const handleCapture = (event) => {
// ã€ãã³ããmodal-rootå
ããçºçããå ŽåãäœãããŸãã
if (modalRoot.contains(event.target)) {
return;
}
// ã€ãã³ããã¢ãŒãã«ã®å€ããçºçããå Žåãããã«ã¢ããããã®ãé²ããŸã
console.log('Event captured outside the modal!', event.target);
event.stopPropagation();
setShowModal(false);
};
React.useEffect(() => {
document.addEventListener('click', handleCapture, true); // ãã£ããã£ãã§ãŒãºïŒ
return () => {
document.removeEventListener('click', handleCapture, true);
};
}, [showModal]);
return (
<div>
<button onClick={() => setShowModal(true)}>Open Modal</button>
{showModal && (
<Modal>
<button onClick={() => alert('Button inside modal clicked!')}>Click Me Inside Modal</button>
</Modal>
)}
</div>
);
}
export default App;
ãã®äŸã§ã¯ãhandleCapture颿°ã¯useCapture: trueãªãã·ã§ã³ã䜿çšããŠããã¥ã¡ã³ãã«ã¢ã¿ãããããŸããããã¯ãhandleCaptureãããŒãžã®ä»ã®ã¯ãªãã¯ãã³ãã©*ããåã«*åŒã³åºãããããšãæå³ããŸãã颿°ã¯ãã€ãã³ãã¿ãŒã²ãããmodalRootå
ã«ãããã©ããã確èªããŸããããã§ããå Žåãã€ãã³ãã¯ãããªã³ã°ãç¶ç¶ã§ããŸããããã§ãªãå Žåãã€ãã³ãã¯event.stopPropagation()ã䜿çšããŠãããªã³ã°ã忢ããã¢ãŒãã«ã¯éããããŸããããã«ãããã¢ãŒãã«ã®å€ã§ã®ã¯ãªãã¯ãäžæ¹åã«äŒæããã®ãé²ããŸãã
èæ ®äºé ïŒ
- ãã£ããã£ãã§ãŒãºã€ãã³ããªã¹ããŒã¯ããããªã³ã°ãã§ãŒãºãªã¹ããŒ*ããåã«*å®è¡ããããããæ³šæããŠäœ¿çšããªããšãããŒãžã®ä»ã®ã€ãã³ããªã¹ããŒã«å¹²æžããå¯èœæ§ããããŸãã
- ãã®ã¢ãããŒãã¯ã
stopPropagation()ãŸãã¯æ¡ä»¶ä»ãã€ãã³ãåŠçã䜿çšãããããçè§£ãšãããã°ãè€éã«ãªãå¯èœæ§ããããŸãã - ã€ãã³ããããŒã®æ©ã段éã§ã€ãã³ããã€ã³ã¿ãŒã»ããããå¿ èŠãããç¹å®ã®ã·ããªãªã§åœ¹ç«ã¡ãŸãã
4. Reactã®åæã€ãã³ããšPortalã®DOMäœçœ®
Reactã®åæã€ãã³ãã·ã¹ãã ãèŠããŠããããšãéèŠã§ããReactã¯ããã€ãã£ãDOMã€ãã³ããåæã€ãã³ãã§ã©ããããŸãããããã¯ã¯ãã¹ãã©ãŠã¶ã©ãããŒã§ãããã®æœè±¡åã«ãããReactã§ã®ã€ãã³ãåŠçãç°¡çŽ åãããŸãããåºã«ãªãDOMã€ãã³ãã¯åŒãç¶ãçºçããŠããããšãæå³ããŸããReactã€ãã³ããã³ãã©ã¯ã«ãŒãèŠçŽ ã«ã¢ã¿ãããããé©åãªã³ã³ããŒãã³ãã«å§ä»»ãããŸãããã ããããŒã¿ã«ã¯DOMã¬ã³ããªã³ã°ã®å Žæãã·ããããŸãããReactã³ã³ããŒãã³ãæ§é ã¯å€ãããŸããã
ãããã£ãŠãããŒã¿ã«ã®ã³ã³ãã³ããDOMã®å¥ã®éšåã«ã¬ã³ããªã³ã°ãããŠããŠããReactã®ã€ãã³ãã·ã¹ãã ã¯ã³ã³ããŒãã³ãããªãŒã«åºã¥ããŠæ©èœããŸããããã¯ãReactã§ç®¡çãããDOMé åã®*å€åŽ*ã§ãããªã³ã°ãå
·äœçã«é²ãå¿
èŠããªãéããDOMã€ãã³ããããŒãçŽæ¥æäœããã«ãããŒã¿ã«å
ã§Reactã®ã€ãã³ãåŠçã¡ã«ããºã ïŒonClickãªã©ïŒãåŒãç¶ã䜿çšã§ããããšãæå³ããŸãã
React Portalã§ã®ã€ãã³ããããªã³ã°ã®ãã¹ããã©ã¯ãã£ã¹
React Portalãšã€ãã³ããããªã³ã°ã䜿çšããéã«èŠããŠããã¹ããã¹ããã©ã¯ãã£ã¹ã次ã«ç€ºããŸãã
- DOMæ§é ãçè§£ããïŒããŒã¿ã«ãã¬ã³ããªã³ã°ãããDOMæ§é ãæ³šææ·±ãåæããŠãã€ãã³ããããªãŒãã©ã®ããã«ããã«ã¢ããããããçè§£ããŸãã
stopPropagation()ãæ§ããã«äœ¿çšããïŒstopPropagation()ã¯ãã©ãããŠãå¿ èŠãªå Žåã«ã®ã¿äœ¿çšããŠãã ãããæå³ããªãå¯äœçšãçºçããå¯èœæ§ããããŸãã- æ¡ä»¶ä»ãã€ãã³ãåŠçãæ€èšããïŒã€ãã³ãã¿ãŒã²ããã«åºã¥ããŠæ¡ä»¶ä»ãã€ãã³ãåŠçã䜿çšããŠãããŒã¿ã«å ããçºçããã€ãã³ããéžæçã«åŠçããŸãã
- ãã£ããã£ãã§ãŒãºã€ãã³ããªã¹ããŒã掻çšããïŒç¹å®ã®ã·ããªãªã§ã¯ããã£ããã£ãã§ãŒãºã€ãã³ããªã¹ããŒã䜿çšããŠãã€ãã³ããããŒã®æ©ã段éã§ã€ãã³ããã€ã³ã¿ãŒã»ããããããšãæ€èšããŠãã ããã
- 培åºçã«ãã¹ãããïŒã³ã³ããŒãã³ãã培åºçã«ãã¹ãããŠãã€ãã³ããããªã³ã°ãæåŸ ã©ããã«æ©èœããäºæããªãå¯äœçšããªãããšã確èªããŸãã
- ã³ãŒããããã¥ã¡ã³ãåããïŒReact Portalã§ã€ãã³ããããªã³ã°ãåŠçããæ¹æ³ã説æããããã«ãã³ãŒããæç¢ºã«ããã¥ã¡ã³ãåããŸããããã«ãããä»ã®éçºè ãã³ãŒããçè§£ããŠä¿å®ããããšã容æã«ãªããŸãã
- ã¢ã¯ã»ã·ããªãã£ãèæ ®ããïŒã€ãã³ãäŒæã管çãããšãã¯ã倿Žãã¢ããªã±ãŒã·ã§ã³ã®ã¢ã¯ã»ã·ããªãã£ã«æªåœ±é¿ãäžããªãããã«ããŠãã ãããããšãã°ãããŒããŒãã€ãã³ãã誀ã£ãŠãããã¯ãããªãããã«ããŸãã
- ããã©ãŒãã³ã¹ïŒç¹ã«
documentãŸãã¯windowãªããžã§ã¯ãã§ãéå°ãªã€ãã³ããªã¹ããŒã®è¿œå ã¯é¿ããŠãã ãããããã«ãããããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ããããŸããå¿ èŠã«å¿ããŠãã€ãã³ããã³ãã©ãŒããããŠã³ã¹ãŸãã¯ã¹ãããã«ããŸãã
å®éã®äŸ
React Portalã§ã€ãã³ããããªã³ã°ãå¶åŸ¡ããããšãäžå¯æ¬ ãªå®éã®äŸãããã€ãèããŠã¿ãŸãããã
- ã¢ãŒãã«ïŒäžèšã®äŸã§ç€ºããããã«ãã¢ãŒãã«ã¯React Portalã®å žåçãªãŠãŒã¹ã±ãŒã¹ã§ããã¢ãŒãã«å ã®ã¯ãªãã¯ãã¢ãŒãã«ã®å€ã®ã¢ã¯ã·ã§ã³ãããªã¬ãŒããã®ãé²ãããšã¯ãåªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ãšã£ãŠéåžžã«éèŠã§ãã
- ããŒã«ãããïŒããŒã«ãããã¯ãå€ãã®å Žåãã¿ãŒã²ããèŠçŽ ãåºæºã«ããŠé 眮ããããã«ããŒã¿ã«ã䜿çšããŠã¬ã³ããªã³ã°ãããŸããããŒã«ãããã®ã¯ãªãã¯ã§èŠªèŠçŽ ãéããããªãããã«ããããšããããŸãã
- ã³ã³ããã¹ãã¡ãã¥ãŒïŒã³ã³ããã¹ãã¡ãã¥ãŒã¯ãéåžžãããŠã¹ã«ãŒãœã«ã®è¿ãã«é 眮ããããã«ããŒã¿ã«ã䜿çšããŠã¬ã³ããªã³ã°ãããŸããã³ã³ããã¹ãã¡ãã¥ãŒã®ã¯ãªãã¯ã§åºã«ãªãããŒãžã®ã¢ã¯ã·ã§ã³ãããªã¬ãŒãããªãããã«ããããšããããŸãã
- ããããããŠã³ã¡ãã¥ãŒïŒã³ã³ããã¹ãã¡ãã¥ãŒãšåæ§ã«ãããããããŠã³ã¡ãã¥ãŒã¯å€ãã®å ŽåããŒã¿ã«ã䜿çšããŸããã¡ãã¥ãŒå ã®èª€ã£ãã¯ãªãã¯ã§ã¡ãã¥ãŒãæ©æã«éããããªãããã«ããã«ã¯ãã€ãã³ãäŒæãå¶åŸ¡ããå¿ èŠããããŸãã
- éç¥ïŒéç¥ã¯ãç»é¢ã®ç¹å®ã®é åïŒäŸïŒå³äžé ïŒã«é 眮ããããã«ããŒã¿ã«ã䜿çšããŠã¬ã³ããªã³ã°ã§ããŸããéç¥ã®ã¯ãªãã¯ã§åºã«ãªãããŒãžã®ã¢ã¯ã·ã§ã³ãããªã¬ãŒãããªãããã«ãããšããŠãŒã¶ããªãã£ãåäžããŸãã
çµè«
React Portalã¯ãæšæºã®Reactã³ã³ããŒãã³ãéå±€ã®å€ã«ã³ã³ããŒãã³ããã¬ã³ããªã³ã°ãã匷åãªæ¹æ³ãæäŸããŸãããã€ãã³ããããªã³ã°ã«è€éãããããããŸããDOMã€ãã³ãã¢ãã«ãçè§£ããstopPropagation()ãæ¡ä»¶ä»ãã€ãã³ãåŠçããã£ããã£ãã§ãŒãºã€ãã³ããªã¹ããŒãªã©ã®ææ³ã䜿çšããããšã§ãã€ãã³ãäŒæã广çã«å¶åŸ¡ããããäºæž¬å¯èœã§ä¿å®å¯èœãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ãæ§ç¯ã§ããŸããReact Portalãšã€ãã³ããããªã³ã°ã䜿çšããå Žåã¯ãDOMæ§é ãã¢ã¯ã»ã·ããªãã£ãããã³ããã©ãŒãã³ã¹ãæ
éã«æ€èšããããšãéèŠã§ããã³ã³ããŒãã³ãã培åºçã«ãã¹ãããã³ãŒããããã¥ã¡ã³ãåããŠãã€ãã³ãåŠçãæåŸ
ã©ããã«æ©èœããããšã確èªããŠãã ããã
React Portalã§ã®ã€ãã³ããããªã³ã°å¶åŸ¡ããã¹ã¿ãŒããããšã§ãã¢ããªã±ãŒã·ã§ã³ãšã·ãŒã ã¬ã¹ã«çµ±åãããå šäœçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããã³ãŒãããŒã¹ãããå ç¢ã«ãããæŽç·ŽããããŠãŒã¶ãŒãã¬ã³ããªãŒãªã³ã³ããŒãã³ããäœæã§ããŸããéçºææ³ã鲿©ããã«ã€ããŠãã€ãã³ãåŠçã®ãã¥ã¢ã³ã¹ãææ¡ããããšã§ãã¢ããªã±ãŒã·ã§ã³ãã°ããŒãã«èŠæš¡ã§å¿çæ§ãã¢ã¯ã»ã·ããªãã£ãããã³ä¿å®æ§ãç¶æã§ããããã«ãªããŸãã