import React, { useState } from "react";
import { Overlay } from "@tencent/tea-component";

export default function OverlayExample() {
  const [visible, setVisible] = useState(false);
  const open = () => setVisible(true);
  const close = () => setVisible(false);

  return (
    <Overlay
      layers={[
        <Overlay.Layer
          key="layer"
          visible={visible}
          content={
            <div>
              我是浮层内容，<a onClick={close}>关闭</a>
            </div>
          }
        />,
      ]}
    >
      {ref => (
        <a ref={ref} onClick={open}>
          点击弹出浮层
        </a>
      )}
    </Overlay>
  );
}