zp-bee/es/bee-keeper/index.js

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import { useState, useRef, useLayoutEffect } from 'react';
import { createPortal } from 'react-dom';

var BeeKeeper = function BeeKeeper(props) {
  var _useState = useState(function () {
    return document.createElement('div');
  }),
      _useState2 = _slicedToArray(_useState, 1),
      targetElement = _useState2[0];

  var containerRef = useRef(null); // 增加一个 ref 记录组件是否“被激活过”

  var activatedRef = useRef(false);
  activatedRef.current = activatedRef.current || props.active;
  useLayoutEffect(function () {
    var _a, _b;

    if (props.active) {
      (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(targetElement);
    } else {
      try {
        (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.removeChild(targetElement);
      } catch (e) {}
    }
  }, [props.active, targetElement]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    ref: containerRef
  }), activatedRef.current && /*#__PURE__*/createPortal(props.children, targetElement) // 如果“被激活过”，才渲染 children
  );
};

export default BeeKeeper;