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>
      <Panel
        title="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>
      <Panel
        title="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 传递来实现的!

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从ROS到数据库:用Python将ROS话题消息保存到数据库

观前提醒&#xff1a;本博客介绍如何使用Python订阅ROS话题,并将接收到的消息保存到SQL数据库中,包括MySQL和SQL Server两种情况。 使用Python订阅ROS话题并将消息保存至MySQL数据库 下面我们将详细介绍如何使用Python订阅ROS话题&#xff0c;并将接收的数据保存到MySQL数据库…

Postman基础功能-Collection集合和批量运行

一、Collection&#xff08;集合&#xff09;介绍 当我们对一个或多个系统中的很多接口用例进行维护时&#xff0c;首先想到的就是对接口用例进行分类管理&#xff0c;同时还希望对这批接口用例做回归测试。 在 Postman 中也提供了这样一个功能&#xff0c;就是 Collec…

【网站项目】SpringBoot781乐乐农产品销售系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

上官婉儿传奇的一生(戴罪之身入宫,却深得两任君主重用)

她最初的身份是罪臣之女、官婢&#xff0c;历经三代帝王更迭&#xff0c;她顶着后妃的头衔&#xff0c;成为武则天和李显的内阁大总管&#xff0c;她是如何赢得两位帝王的信任&#xff1f; 01从官婢到女官的逆袭 公元664年&#xff0c;上官婉儿出生在唐高宗时代&#xff0c;她…

免费无限换脸 - 最强AI换脸Facefusion整合包最新版来啦!

今天我要分享的是FaceFusion最新版&#xff0c;它最近更新到了2.5.3版本&#xff0c;带来了许多激动人心的改进和优化。 Facefusion2.5.3版本介绍 FaceFusion不仅仅是一款换脸软件&#xff0c;它更是一个多功能的数字人和实时直播助手&#xff0c;真正开启了个性化媒体的新时代…

tomcat 的启动流程

tomcat 的启动流程 中 使用的Lifecycle 生命流程 。在这里还使用了设计模式中的模板模式&#xff08;LifecycleBase 是一个模板类&#xff09; init&#xff08;&#xff09;方法 start() 方法 container 的处理

【STM32 |示例程序】EXTI中断示例程序(对射式红外传感器旋转编码器计次)

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 丠丠64-CSDN博客&#x1f388;&#x1f388; ✨✨ 帅哥美女们&#xff0c;我们共同加油&#xff01;一起…

携程网站_广州动物园景点评论采集和处理

一、爬取携程网站_广州动物园景点评论数据100条 数据包括&#xff1a;用户名、评论文本内容、发布时间</n> 结果分别保存在userNames&#xff0c;commentDetails commentTimes列表中。 import requests import json import time userNames [] commentDetails [] com…

ComfyUI相见恨晚的提示词插件,简直堪称神器!

之前我曾介绍过一款专为SD设计的中文提示词插件——prompt-all-in-one&#xff0c;想必使用过的小伙伴们都已经感受到了它的便捷与实用吧。 不过&#xff0c;那款插件是基于webUI版本的&#xff0c;而现在&#xff0c;越来越多的朋友开始探索ComfyUI这一新选择。 假如在Comfy…

Netty-面试题(中)(五十)

关于零拷贝和堆外内存 Java在将数据发送出去的时候&#xff0c;会先将数据从堆内存拷贝到堆外内存&#xff0c;然后才会将堆外内存再拷贝到内核态&#xff0c;进行消息的收发&#xff0c;代码如下: 所以&#xff0c;我们发现&#xff0c;假如我们在收发报文的时候使用直接内存&…

(接上一篇linux rocky 搭建DNS高阶版)实现不同网段访问解析不同的服务器并加域

上一篇链接&#xff1a;linux rocky 搭建DNS服务和禁止AD域控DNS&#xff0c;做到独立DNS并加域-CSDN博客文章浏览阅读417次&#xff0c;点赞13次&#xff0c;收藏7次。使用linux rocky 搭建DNS服务&#xff0c;用于独立AD域控DNS存在&#xff0c;并且实现加域。https://blog.c…

从需求到实现:能源软件服务商如何量身定制企业解决方案

能源行业需要数字化转型的原因主要有以下几点&#xff1a;首先&#xff0c;数字化技术可以提高生产效率和安全性&#xff0c;通过实时监控和智能调度降低事故风险&#xff0c;并实现远程控制和自动化生产。其次&#xff0c;数字化转型有助于推动能源行业的创新发展&#xff0c;…

51单片机GPS+sim800c GSM定位短信LCD1602液晶显示 原理图+PCB+源码

目录 1、实物图 2、原理图 ​3、PCB​编辑 4、程序 资料下载地址&#xff1a;51单片机GPSsim800c GSM定位短信LCD1602液晶显示 原理图PCB源码 1、实物图 2、原理图 3、PCB 4、程序 #include "common.h" #include "uart.h" #include "gps.h&…

Linux(多线程)

//blockQueue.hpp #pragma once #include <iostream> #include <queue> #include <pthread.h> const int gcap 5; template <class T> class BlockQueue { public:BlockQueue(const int cap gcap):_cap(cap)//初始化阻塞队列的容量{pthread_mutex_in…

java发送请求-二次开发-get请求json

这里有2个判断 如果param为空则对url发送请求 再继续判断有值时&#xff0c;接口参数时json还是namevalue格式 因为json是带{,所以可以先写为param包含{}, 反之就是请求格式是url&#xff1f;param 请求json要带参数&#xff0c;所以需要使用setEntity方法&#xff0c; 最…

数字人解决方案——AniTalker声音驱动肖像生成生动多样的头部说话视频算法解析

1.概述 AniTalker是一款先进的AI驱动的动画生成工具&#xff0c;它超越了简单的嘴唇同步技术&#xff0c;能够精准捕捉并再现人物的面部表情、头部动作以及其他非言语的微妙动态。这不仅意味着AniTalker能够生成嘴型精准同步的视频&#xff0c;更重要的是&#xff0c;它还能够…

Mongo关联查询两张表中分别满足某些条件的记录

如果是在mysql里面&#xff0c;这个查起来就很方便&#xff0c;但是&#xff0c;在mongo里面的话&#xff0c;查询起来就没这么方便了。 如果使用付费版的Studio 3T工具的话&#xff0c;也可以像使用mysql一样查询mongo数据&#xff0c;但是免费版不支持sql的用法&#xff0c;只…

轻松上手:几款易用性强的加密软件推荐

在现代社会&#xff0c;随着信息技术的不断发展和普及&#xff0c;数据安全成为了每个人都需要面对的重要问题。为了保护个人隐私和重要信息&#xff0c;加密软件成为了我们不可或缺的工具。本文将为您推荐几款易用性强的加密软件&#xff0c;帮助您轻松上手&#xff0c;确保数…

优思学院:精益六西格玛如何影响企业文化?

精益六西格玛&#xff08;Lean Six Sigma&#xff09;是一种在优化生产过程、提高效率、减少浪费的管理方法论。其影响远不止于生产线或质量控制部门&#xff0c;实际上&#xff0c;精益六西格玛的实施可以深刻影响企业文化的各个层面&#xff0c;從而令企業獲得真正最大的成功…

解决离线服务器无法加载HuggingFaceEmbeddings向量化模型的问题

由于服务器是离线的&#xff0c;因此我先在本地到huggingface官网下载模型text2vec&#xff0c;然后上传到服务器上运行&#xff0c;报错&#xff1a; (MaxRetryError(HTTPSConnectionPool(host\huggingface.co\, port443): Max retries exceeded with url: /api/models/senten…