react hooks 子传父

import React,{useState } from "react";
import HeXiaoDialog from "../components/hexiaoDialog";  //引入的子组件
function ShuoMing(props){
  let [flag , setFlag] = useState(false)
  const getFlag =()=>{
    setFlag(true)
  }
  return (
    <div style={{marginTop:'30px'}}>
      <div style={{marginBottom:'30px'}}>这里是父组件的地方
      <button style={{marginLeft:'20px'}} onClick={()=>{getFlag()}}>点击出现子组件</button>
      </div>
      {
        flag? <HeXiaoDialog setFlag={setFlag}></HeXiaoDialog>: <></>
      }
    </div>
  )
}

export default ShuoMing;

import React from 'react';
 function heXiaoDialog(props){
  const {setFlag} = props;
  return (
    <div>
      <div>这里是内容区域</div>
      <div>这里是内容区域</div>
      <div>这里是内容区域</div>
      <div>这里是内容区域</div>
    
      <button onClick={()=>{setFlag(false)}}>关闭子组件</button>
    </div>
  )
}
export default heXiaoDialog;