REACT 在组件之间共享状态

有时,您希望两个组件的状态始终一起变化。要做到这一点,请从他们俩身上删除状态,将其移动到他们最近的共同父级,然后通过道具将其传递给他们。这被称为提升状态,这是编写 React 代码时最常见的事情之一。

举例提升状态

在此示例中,父组件呈现两个单独的 s:AccordionPanel

  • Accordion
    • Panel
    • Panel

每个组件都有一个布尔状态,用于确定其内容是否可见。PanelisActive

按两个面板的显示按钮:

import { useState } from 'react';function Panel({ title, children }) {const [isActive, setIsActive] = useState(false);return (<section className="panel"><h3>{title}</h3>{isActive ? (<p>{children}</p>) : (<button onClick={() => setIsActive(true)}>Show</button>)}</section>);
}export default function Accordion() {return (<><h2>Almaty, Kazakhstan</h2><Panel title="About">With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.</Panel><Panel title="Etymology">The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.</Panel></>);
}

请注意,按下一个面板的按钮不会影响另一个面板,因为它们是独立的。

该图显示了一个由三个组件组成的树,一个父组件标记为 Accordion,两个子组件标记为 Panel。两个 Panel 组件都包含值为 false 的 isActive。

最初,每个 的状态都是 ,所以它们看起来都折叠了PanelisActivefalse

与上一个图相同的图,突出显示了第一个子 Panel 组件的 isActive,表示单击时 isActive 值设置为 true。第二个 Panel 组件仍包含值 false。

单击任一按钮只会单独更新该状态PanelPanelisActive

但现在假设您要更改它,以便在任何给定时间仅展开一个面板。在这种设计下,展开第二个面板应该会折叠第一个面板。你会怎么做?

要协调这两个面板,您需要通过三个步骤将其状态“提升”到父组件:

  1. 从子组件中删除状态。
  2. 从公共父级传递硬编码数据。
  3. 将状态添加到公共父级,并将其与事件处理程序一起传递。

这将允许组件协调两个 s,并且一次只能展开一个。AccordionPanel

步骤 1:从子组件中删除状态

您将把 的控制权交给其父组件。这意味着父组件将作为 prop 传递。首先从组件中删除以下行PanelisActiveisActivePanelPanel

const [isActive, setIsActive] = useState(false);

取而代之的是,添加到道具列表中:isActivePanel

function Panel({ title, children, isActive }) {

现在,父组件可以通过将其作为 prop 传递来控制。相反,组件现在无法控制 - 现在由父组件决定!PanelisActivePanelisActive

步骤 2:从公共父级传递硬编码数据

若要提升状态,必须找到要协调的两个子组件中最接近的公共父组件:

  • Accordion (最接近的共同父级)
    • Panel
    • Panel

在此示例中,它是组件。由于它位于两个面板的上方,并且可以控制它们的道具,因此它将成为面板当前处于活动状态的“真相来源”。使组件将硬编码值(例如,)传递给两个面板:AccordionAccordionisActivetrue

import { useState } from 'react';export default function Accordion() {return (<><h2>Almaty, Kazakhstan</h2><Panel title="About" isActive={true}>With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.</Panel><Panel title="Etymology" isActive={true}>The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.</Panel></>);
}function Panel({ title, children, isActive }) {return (<section className="panel"><h3>{title}</h3>{isActive ? (<p>{children}</p>) : (<button onClick={() => setIsActive(true)}>Show</button>)}</section>);
}

 

尝试编辑组件中的硬编码值,并在屏幕上查看结果。isActiveAccordion

步骤 3:将状态添加到公共父级

提升状态通常会改变存储为状态的内容的性质。

在这种情况下,一次只能有一个面板处于活动状态。这意味着公共父组件需要跟踪哪个面板是活动面板。它可以不使用值,而是使用数字作为状态变量的活动索引:AccordionbooleanPanel

const [activeIndex, setActiveIndex] = useState(0);

当 是 时,第一个面板处于活动状态,当它处于活动状态时,它是第二个面板。activeIndex01

单击其中的“显示”按钮需要更改 中的活动索引。A 不能直接设置状态,因为它是在 .组件需要显式允许组件通过将事件处理程序作为 prop 向下传递来更改其状态:PanelAccordionPanelactiveIndexAccordionAccordionPanel

<>
<Panel
isActive={activeIndex === 0}
onShow={() => setActiveIndex(0)}
>
...
</Panel>
<Panel
isActive={activeIndex === 1}
onShow={() => setActiveIndex(1)}
>
...
</Panel>
</>

内部现在将使用道具作为其 click 事件处理程序:<button>PanelonShow

import { useState } from 'react';export default function Accordion() {const [activeIndex, setActiveIndex] = useState(0);return (<><h2>Almaty, Kazakhstan</h2><Paneltitle="About"isActive={activeIndex === 0}onShow={() => setActiveIndex(0)}>With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.</Panel><Paneltitle="Etymology"isActive={activeIndex === 1}onShow={() => setActiveIndex(1)}>The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.</Panel></>);
}function Panel({title,children,isActive,onShow
}) {return (<section className="panel"><h3>{title}</h3>{isActive ? (<p>{children}</p>) : (<button onClick={onShow}>Show</button>)}</section>);
}

这样就完成了提升状态!将状态移动到公共父组件中允许您协调两个面板。使用活动索引而不是两个“显示”标志可确保在给定时间只有一个面板处于活动状态。将事件处理程序传递给子级允许子级更改父级的状态。

每个州的单一事实来源

在 React 应用程序中,许多组件将有自己的状态。某些状态可能像输入一样“存在于”叶子组件(树底部的组件)附近。其他状态可能“生活”在更靠近应用程序顶部的位置。例如,即使是客户端路由库,通常也是通过将当前路由存储在 React 状态,并通过 props 传递来实现的!

对于每个唯一的状态,您将选择“拥有”它的组件。这一原则也被称为具有“单一事实来源”。这并不意味着所有状态都存在于一个地方,而是对于每个状态,都有一个特定的组件来保存该信息。与其在组件之间复制共享状态,不如将其提升到其共同的共享父级,并将其传递给需要它的子级。

你的应用会随着你的使用而改变。通常,当您仍在弄清楚状态的每个部分“居住”的位置时,您会向下或向上移动状态。这都是过程的一部分!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/837329.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正念冥想训练内容有哪些?流静冥想

正念冥想训练内容有哪些&#xff1f; “我做不到感恩&#xff0c;总觉得满世界都是欠我的。”同学A这样说。看得出来她的无奈、无力以及无头绪感。 “我无法对父母做出感恩的祝福&#xff0c;从他们那里我感受不到爱&#xff0c;感受不到关怀&#xff0c;体验不到感恩。”同学…

校园电话机对于校园信息化管理非常重要

任何一部校园电话机都有信息办理渠道&#xff0c;并且发挥着重要的效果&#xff0c;能够满意整个机器的更快速运作。然后使学生能够取得一个更好的运用条件&#xff0c;学生在运用产品的过程中&#xff0c;要经过正确的操作环节才能够发挥产品的优胜功能&#xff0c;然后到达一…

TCP连接建立与释放连接——>三次握手和四次挥手

1.三次握手的概述 我们在学网络的概念时&#xff0c;每当讲到TCP都会听到三次握手和四次挥手&#xff0c;一直以来可能都对这个概念模糊不清&#xff0c;那么什么是三次握手和四次挥手呢&#xff1f;简单的举一个例子&#xff0c;如果我们和朋友打游戏&#xff0c;我们要和朋友…

【class2】人工智能初步(自然语言处理)

要实现从评价中提取高频关键词&#xff0c;并判别其正负面性&#xff0c;其实是通过人工智能领域中的一个分支&#xff1a;自然语言处理。 在了解自然语言处理之前&#xff0c;我们先来说说&#xff0c;什么是自然语言&#xff08;Natural Language&#xff09;&#xff1f;自…

哔哩哔哩直播通用榜单系统

榜单系统的定位和业务价值 榜单遍布B站直播相关业务的各个角落&#xff0c;直播打赏、直播间互动、付费玩法、互动玩法、活动、主播PK、语聊房、人气主播排名、高价值用户排名、增值集卡、up主充电等等&#xff0c;在这众多的业务场景中&#xff0c;我们能看到各种各样的榜单。…

腐烂的橘子BFS

题目&#xff1a; 腐烂的橘子 在给定的 m x n 网格 grid 中&#xff0c;每个单元格可以有以下三个值之一&#xff1a; 值 0 代表空单元格&#xff1b; 值 1 代表新鲜橘子&#xff1b; 值 2 代表腐烂的橘子。 每分钟&#xff0c;腐烂的橘子 周围 4 个方向上相邻 的新鲜橘子…

使用VSCode撰写Latex文档

参考资料&#xff1a; 如何使用VSCode编写Latex&#xff1f; 概要 先安装texlive,然后安装VSCode. 我这里步骤是全的&#xff0c;但说的不那么细。 只介绍VSCode中的配置方法。 VSCode配置步骤 1. 安装LaTex Workshop插件 2. 配置Latex编译环境 将下列配置粘入settings.j…

TNNLS:Fast Self-Supervised Clustering With Anchor Graph论文阅读

1 Abstract 由于避免了使用通常在现实世界中不足的标记样本&#xff0c;无监督学习被视为在聚类任务中的快速和强大策略。然而&#xff0c;直接从原始数据集进行聚类会导致高计算成本&#xff0c;这限制了其在大规模和高维问题上的应用。最近&#xff0c;基于锚点的理论被提出…

基于uniapp+vue3+ts小程序项目实战之项目初始化

&#x1f680; 作者 &#xff1a;“二当家-小D” &#x1f680; 博主简介&#xff1a;⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人&#xff0c;8年开发架构经验&#xff0c;精通java,擅长分布式高并发架构,自动化压力测试&#xff0c;微服务容器化k…

长难句打卡5.14

This is now a question for Gloria Mackenzie, an 84-year-old widow who recently emerged from her small, tin-roofed house in Florida to collect the biggest undivided lottery jackpot in history. 翻译&#xff1a;这是84岁的孤寡老人歌莉娅 麦肯齐当前所面临的问题…

Linux系统搭建Gitlab开源仓库管理系统并实现公网环境访问本地私有库

文章目录 前言1. 下载Gitlab2. 安装Gitlab3. 启动Gitlab4. 安装cpolar5. 创建隧道配置访问地址6. 固定GitLab访问地址6.1 保留二级子域名6.2 配置二级子域名 7. 测试访问二级子域名 前言 GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xf…

geotrust ov泛域名证书2990

Geotrust是一家正规的CA证书颁发机构&#xff0c;致力于为个人以及企事业单位开发者提供安全可靠的数字证书产品&#xff0c;维护了个人博客网站、企业官网、商城网站以及银行等金融网站的数据安全&#xff0c;营造了一种健康的网络环境。今天就随SSL盾小编了解Geotrust旗下的O…

OSU micro-benchmarks安装测试指导

OSU micro-benchmarks安装测试指导 OSU micro-benchmarks工具介绍 OSU Micro benchmark工具是由Ohio State University提供的MPI&#xff08;Message Passing Interface&#xff0c;消息传递接口&#xff09;通信效率评测工具。该工具旨在通过执行不同模式的MPI操作&#xff…

linux fdisk 银河麒麟操作系统 v10 磁盘分区和挂载 详细教程

1查看 未加载的磁盘 fdisk -l 2 开始分区 fdisk /dev/vdb #查看分区 #新建分区和保存 3 格式化和挂载 fdisk -l mkfs.xfs /dev/vdb1 #查看uuid blkid /dev/vdb1 mkdir /data vi /etc/fstab UUID209daa-fb1c-48f2-bf5e-e63f38cb8a /data xfs defaults 0 0 #加载下 mo…

【bug记录】Vue3 Vant UI 中 van-popup 不弹出

原因&#xff1a;语法使用错误&#xff0c;使用了 Vue 2 的语法 Vue3语法&#xff1a; Vue2语法&#xff1a;

【JavaEE 初阶(六)】网络编程

❣博主主页: 33的博客❣ ▶️文章专栏分类:JavaEE◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你了解更多网络知识 目录 1.前言2.浅谈网络2.1基本知识2.2.OSI与TCP/IP 3.网络编程3.1TCP与UDP区别3.2UDP网路编程…

四川易点慧电商抖音小店:优势尽显,引领电商新潮流

在当下这个信息爆炸、消费模式日新月异的时代&#xff0c;电商行业正在经历一场前所未有的变革。四川易点慧电商抖音小店凭借其独特的优势&#xff0c;成功吸引了大量消费者的目光&#xff0c;成为电商领域的一股新势力。 四川易点慧电商抖音小店的最大优势在于其强大的品牌影…

Vue3实战笔记(19)—封装菜单组件

文章目录 前言一、封装左侧菜单导航组件二、使用步骤三、小彩蛋总结 前言 在Vue 3中封装一个左侧导航菜单组件是一项提升项目结构清晰度和代码可复用性的关键任务。这个过程不仅涉及组件的设计与实现&#xff0c;还需考虑其灵活性、易用性以及与Vue 3新特性的紧密结合。以下是…

如何恢复删除的文件?收好6个恢复策略!

“我经常在操作电脑时可能会有误删文件的情况发生&#xff0c;如果我不小心删除了重要的文件&#xff0c;应该使用什么方法来恢复它们呢&#xff1f;求解答&#xff01;” 在使用电脑时&#xff0c;我们可能一个手滑就误删了重要的文件。当文件删除后&#xff0c;如果没有掌握相…

win10安装mysql8.0+汉化

一、官网安装 MySQL 1. 在mysql官网进行下载页面 2. 下滑页面&#xff0c;选择 MySQL community download 3.下载windows版本 4.选择第二个download 5.不用登陆&#xff0c;no thanks&#xff0c;just start my download. 6.下载 二、安装 1. 双击安装 2. 选 Full->next 3…