用组件封装一块内容隐藏，当点击按钮时弹出组件并覆盖整个屏幕

可以使用 React 中的 Portal 和 CSS 的 position 属性来实现这个功能。

首先，需要创建一个隐藏的组件，例如：

import React from 'react';

const HiddenComponent = ({ isOpen, onClose }) => {
  return isOpen ? (
    <div className="overlay" onClick={onClose}>
      <div className="modal">
        <h2>Title</h2>
        <p>Content goes here.</p>
      </div>
    </div>
  ) : null;
};

export default HiddenComponent;

这里使用了一个 `overlay` 和一个 `modal` 来实现遮罩和弹窗的效果，具体样式可以自行定义和修改。

接下来，在页面中创建一个按钮，当点击按钮时，显示隐藏的组件。

import React, { useState } from 'react';
import HiddenComponent from './HiddenComponent';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpen}>Show Hidden Component</button>
      <HiddenComponent isOpen={isOpen} onClose={handleClose} />
    </div>
  );
};

export default App;

最后，在 CSS 中设置 `overlay` 的样式为 `position: fixed; top: 0; left: 0; right: 0; bottom: 0;`，使其覆盖整个屏幕。这样，当用户点击按钮时，就会弹出隐藏组件并覆盖整个屏幕了。