react/react-portal/react-portal.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Portal</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>

<body>
  <!--  
    React Portal 的使用场景：
    当制作模态框、模糊层这类组件时，可能会在分离的根节点绑定事件，而不是在默认的父组件中
    这时可以使用 Portal 将子组件挂载到分离的根组件上，但触发的事件仍然会冒泡到父组件上

    面试题：渲染到父组件之外的 dom 用什么？
  -->

  <div id="root"></div>
  <div id="modal-root"></div>

  <script src="Parent.js" type="text/babel"></script>
  <script src="Child.js" type="text/babel"></script>
  <script src="Modal.js" type="text/babel"></script>
  <script type="text/babel">
    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    )
  </script>
</body>

</html>