All files / src/overlay/_example OverlayExample.jsx

71.43% Statements 5/7
100% Branches 0/0
50% Functions 2/4
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31        1x 1x 1x   1x                             2x              
import React, { useState } from "react";
import { Overlay } from "@tencent/tea-component/lib/overlay";
 
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>
  );
}