Fragments

Fragments 在解析的时候会被删除掉，所以不会产生多余的标签

导入

import { Fragment } from "react";

使用

class Test extends Component {
  render() {
    return (
      <Fragment>
        <p>1</p>
        <p>2</p>
      </Fragment>
    );
  }
}

export default Test;

Portals

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

创建组件

Potals.js

import React from "react";
import ReactDom from "react-dom";

class Potals extends React.Component {
  render() {
    return ReactDom.createPortal(
      <div>Protals</div>,
      document.getElementById("root-dome")
    );
  }
}

export default Potals;

使用

App.js

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

import Potals from "./Potals";

function App() {
  return (
    <div className="App">
      <p>App</p>
    </div>
  );
}

const rootElement = document.getElementById("root");
const potalsElement = document.getElementById("potals");

ReactDOM.render(<App />, rootElement);
ReactDOM.render(<Potals />, potalsElement);