React 之 Portals 插槽(事件冒泡)

插槽：将一个React元素渲染到指定的Dom容器中

ReactDOM.createPortal(React元素, 真实的DOM容器)，该函数返回一个React元素

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。

第二个参数（container）是一个 DOM 元素。

import React, { Component } from "react";
import ReactDOM from "react-dom";
​
export default class Portals extends Component {
  render() {
    return (
      <div
        onClick={() => {
          console.log("rooter click");
        }}
      >
        <p>我想出现在root中</p>
        <Test />
      </div>
    );
  }
}
​
function Test() {
  return ReactDOM.createPortal(
    <ChildA />,
    //     <h1>我想出现在container中</h1>,
    document.getElementById("container")
  );
}
​
function ChildA() {
  return <p>我是childA</p>;
}

 

注意

1.React中的事件是包装过的

2.它的事件冒泡是根据虚拟DOM树来冒泡，与真实的DOM树无关