問題一覧に戻る
中級高度なパターン
問題63: ポータル

ReactDOM.createPortalを使用して、親コンポーネントのDOM階層外に子要素をレンダリングする方法を学びます。モーダル、ツールチップ、通知など、親のCSSoverflowやz-indexの影響を受けたくないUIの実装に使用します。第1引数にレンダリングする要素、第2引数にターゲットDOM要素を指定します。イベントは通常通りReactツリーを伝播します。

import React from 'react';
import ReactDOM from 'react-dom';

{/* モーダルコンポーネント */}
function Modal({ children }) {
  {/* ポータルを作成 */}
  return ReactDOM.(
    <div style={{ background: 'rgba(0,0,0,0.5)', position: 'fixed', top: 0 }}>
      {children}
    </div>,
    {/* ターゲットDOM要素 */}
    document.getElementById('')
  );
}

function App() {
  const [show, setShow] = React.useState(false);
  
  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      {show && <><h1>Modal!</h1></>}
    </div>
  );
}

export default App;
···