父组件中:
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;
标签:false,子传父,hooks,react,setFlag,props,组件,import From: https://www.cnblogs.com/anna001/p/17644598.html