首页 > 其他分享 >react hooks 子传父

react hooks 子传父

时间:2023-08-20 21:22:23浏览次数:41  
标签:false 子传父 hooks react setFlag props 组件 import

父组件中:

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

相关文章

  • svn hooks
    1svn hooks 1.1钩子脚本:写法就是系统中shell脚本程序的写法当svn版本库发生改变时候,hooks就会触发相应作出执行命令,根据hooks输出或者返回的状态,hooks程序能够以某种方式执行该动作继续执行,停止或者挂起、-rw-r--r-- 1 root root 2780 Oct 22 17:05 start-commit.tmpl......
  • react项目搭建-路由封装
    routerv6路由统一管理与添加,对是否登录进行判断。1.使用脚手架创建项目新建一个文件夹,在文件夹内部打开命令行工具。执行命令:npxcreate-react-app项目名字将项目放在开发工具中,打开项目终端运行项目(npmstart/yarnstart)注:npx命令会帮助我们临时安装create-react-ap......
  • 谈谈Vue3中的ref和reactive
    一、是什么?ref和reactive是Vue3中用来实现数据响应式的API一般情况下,ref定义基本数据类型,reactive定义引用数据类型(我喜欢用它来定义对象,不用它定义数组,原因后面讲)我理解的ref本质上是reactive的再封装二、先聊reactivereactive定义引用数据类型(以对象和数组举例),它能够将复......
  • React请求机制优化思路
    说起数据加载的机制,有一个绕不开的话题就是前端性能,很多电商门户的首页其实都会做一些垂直的定制优化,比如让请求在页面最早加载,或者在前一个页面就进行预加载等等。随着react18的发布,请求机制这一块也是被不断谈起,并且在后续其实也给出了明确的方向。假如我们页面中有三个组件C1......
  • React面试1
    1.什么是虚拟DOM?虚拟DOM是真实DOM在内存中的表示,ul的表示形式保存在内存中,并且与实际的DOM同步,这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤,整个过程被称为调和2.类组件和函数组件之间的区别是什么?类组件可以使用其他特性,如状态和生命周期钩子,并且他有this函数组件只......
  • [React Typescript] Discriminated Tuples in Custom Hooks
    import{useEffect,useState}from"react";exporttypeResult<T>=|["loading",undefined?]|["error",Error]|["success",T];exportconstuseData=<T,>(url:string):Result<T>=>......
  • 一个 git 仓库下拥有多个项目的 git hooks 配置方案
    前言通常情况下,一个git仓库就是一个项目,只需要配置一套githooks脚本就可以执行各种校验任务。对于monorepo项目也是如此,monorepo项目下的多个packages之间,它们是有关联的,可以互相引用,所以当成一个项目也没问题。但是也有一种情况,一个git仓库下的多个项目之间是彼此......
  • 一文了解 history 和 react-router 的实现原理
    我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。本文作者:霜序前言在前一篇文章中,我们详细的说了[email protected]升级到@6.x需要注意的问题以及变更的使用方式。react-router版本更新非......
  • [React Typescript] Well typed a React Context provider
    importReactfrom"react";import{Equal,Expect}from"../helpers/type-utils";constcreateRequiredContext=<Textendsany>()=>{constcontext=React.createContext<T|null>(null);constuseContext=<Te......
  • [React Typescript] Fixing type inference in a Custom React Hook
    //Problemimport{useState}from"react";import{Equal,Expect}from"../helpers/type-utils";exportconstuseId=(defaultId:string)=>{const[id,setId]=useState(defaultId);return[id,setId];};const[id,setI......