父组件点击按钮，子组件显示把父组件覆盖

在React中，你可以通过在父组件中设置一个状态来控制子组件的显示和隐藏。当父组件点击按钮时，可以修改这个状态，从而实现子组件的覆盖。

首先，在父组件中定义一个状态来控制子组件的显示和隐藏。可以使用useState钩子函数来创建一个状态变量，并初始化为false（表示初始状态下子组件是隐藏的）。

import React, { useState } from "react";

function ParentComponent() {
  const [showChild, setShowChild] = useState(false);

  const handleClick = () => {
    setShowChild(true);
  };

  return (
    <div>
      <button onClick={handleClick}>点击我显示子组件</button>
      {showChild && <ChildComponent />}
    </div>
  );
}

在上面的代码中，当按钮被点击时，handleClick函数会将showChild状态设置为true，从而触发子组件的显示。而在父组件的JSX代码中，使用了逻辑与运算符来判断showChild的值，如果为true，则渲染子组件。

然后，创建子组件ChildComponent，它可以是一个函数组件或者类组件，这里使用函数组件来示例：

import React from "react";

function ChildComponent() {
  return <div>我是子组件</div>;
}

这样，当父组件的按钮被点击时，子组件会显示在父组件上方，实现了覆盖效果。