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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = require("react-dom");

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

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

  var activatedRef = (0, _react.useRef)(false);
  activatedRef.current = activatedRef.current || props.active;
  (0, _react.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    ref: containerRef
  }), activatedRef.current && /*#__PURE__*/(0, _reactDom.createPortal)(props.children, targetElement) // 如果“被激活过”，才渲染 children
  );
};

var _default = BeeKeeper;
exports.default = _default;