首页 > 其他分享 >react 用父组件状态控制子组件状态方案

react 用父组件状态控制子组件状态方案

时间:2023-05-04 17:13:52浏览次数:47  
标签:状态 loading 用父 setLoading react visible 组件 any

react 想用父组件的状态来控制子组件的状态。有时我们可能想在父组件里设置子组件某个状态的值,这时我们应该怎么实现代码呢?

法一:把需要共享的状态放在子组件的参数里

比如下面这个 MyTestSubModal 子组件,有 2 个状态:visible 和 loading,分别使用 setVisible 和 setLoading 来控制,不仅子组件自己可以设置状态,而且想在父组件中也能修改这两个状态,那么可以把这 4 个参数都放到子组件的参数里。这样子组件和父组件都可以用这 4 个参数。父组件修改状态后,子组件的状态也会变化。

export default function MyTestSubModal(props: { visible: boolean; setVisible: (value: boolean) => any; loading: any; setLoading: (value: any) => any }) {
  const { visible, setVisible, loading, setLoading } = props;
  // 后续就可以像使用局部状态一样使用  visible, setVisible, loading, setLoading 了
}

法二:React的受控组件和非受控组件

可以看React的受控组件和非受控组件介绍

标签:状态,loading,用父,setLoading,react,visible,组件,any
From: https://www.cnblogs.com/hi3254014978/p/17371853.html

相关文章

  • 在开发中,我发现的reactive和ref
    在开发中,我发现了一个问题,就是在element-plus-table组件中使用ref(),定义的数据,在vue文件内部去修改这个响应式数据,任何时候,响应式数据改变,基本上视图也会跟着变化。 但是当我觉得vue文件中script中的代码太长了,将一些功能抽出来,通过引入外部函数的方式去更新响应式数据时,就......
  • Uncaught Error: Objects are not valid as a React child (found: object with keys
    转自:react报错UncaughtError:ObjectsarenotvalidasaReactchild(found:objectwithkeys{a}...报错信息分析UncaughtError:ObjectsarenotvalidasaReactchild(found:objectwithkeys{content,key,duration}).Ifyoumeanttorenderacollectiono......
  • react.js学习笔记
    (1)      参考文献1.前端技术手册2.在线编码......
  • 一条SQL如何被MySQL架构中的各个组件操作执行的?
    摘要:一条SQL如何被MySQL架构中的各个组件操作执行的,执行器做了什么?存储引擎做了什么?表关联查询是怎么在存储引擎和执行器被分步执行的?本文带你探探究竟!本文分享自华为云社区《一条SQL如何被MySQL架构中的各个组件操作执行的?》,作者:砖业洋__。1.单表查询SQL在MySQL架构中的各个组......
  • 直播电商平台开发,环形进度条组件
    直播电商平台开发,环形进度条组件 <template> <divclass="content"ref="box">  <svg   :id="idStr"   style="transform:rotate(-90deg)"   :width="width"   :height="width"   xmlns=&......
  • 关于OKD(OpenShift)中组件资源介绍和命令行操作的一些笔记
    写在前面参加考试,会陆续分享一些OpenShift的笔记博文内容为openshift常见API资源对象介绍,包括所特有的Route,IS,DC,BC等。学习环境为openshiftv3的版本,有些旧这里如果专门学习openshift,建议学习v4版本理解不足小伙伴帮忙指正傍晚时分,你坐在屋檐下,看着天慢慢地黑下去,心......
  • 【HarmonyOS】自定义组件之ArkUI实现通用标题栏组件
     【关键字】标题栏、常用内置组件整合、ArkUI、自定义组件 1、写在前面在上一篇文章中我们通过Java语言实现了一个通用的标题栏组件,有需要的可以看下,文章地址:https://developer.huawei.com/consumer/cn/forum/topic/0202117373459738584?fid=0101587866109860105现在很多......
  • BootstrapBlazor组件保姆级教程
    BootstrapBlazor组件库保姆级使用教程BootstrapBlazor组件库官网https://www.blazor.zone/componentsBootstrapBlazor组件库github仓库地址https://github.com/dotnetcore/BootstrapBlazorBootstrapBlazor组件库gitee仓库地址https://gitee.com/LongbowEnterprise/Bootstra......
  • React 中 Router的相关面试题
    一、请你说说react的路由是什么?React的路由是纯前端的路由,就是根据hash或browserpath的变化,框架内封装好了方法,可以自由的切换DOM展示,来模拟页面或局部页面被替换的目的;让浏览器不用刷新,也能获取想要的页面结构,保存内存数据,提升用户体验 二、React-Router实现原理?当url发......
  • vue2实现数据聚合【scatter-clustering】组件封装
    实现如下效果:效果展示:https://code.juejin.cn/pen/7228568245148581943如果不会请移步到官网的栗子,请点击查看直接给大家上代码:整体代码片段1<template>2<divref="echarts"style="width:100%;height:300px;"></div>3</template>4<scrip......