如何在reactjs中重新加载组件(页面的一部分)?

2024-05-10

我当时正在做反应项目。当我们单击重新加载按钮时,我试图重新加载组件。我实现了 onClick 函数,如下所示。但它正在重新加载整个窗口。我只想重新加载该类组件,而不是整个窗口。谁能帮我解决这个问题吗?

refreshPage() {
    window.location.reload();
  }

我发现的最简单的方法是设置种子状态,并在渲染组件的关键属性中使用它。现在只要种子发生变化,组件就会重新加载。

       const [seed, setSeed] = useState(1);
       const reset = () => {
            setSeed(Math.random());
        }
       <Component key={seed}/>
       <Button onClick={reset}>Reset</Button>

现在,每当按下“重新加载”按钮时,我需要的组件都会被重新渲染。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在reactjs中重新加载组件(页面的一部分)? 的相关文章

  • 更改所选元素的颜色 - React

    我是反应新手 我试图更改所选的一个特定 li 的颜色 但它会更改所有 li 的颜色 此外 当单击另一个 li 时 我希望第一个 i 不再处于活动状态 这是代码 http codepen io polinaz pen zNJKqO http
  • css-loader 不导入 .css 文件返回空对象

    从 css 文件导入样式 返回空对象 看来 css loader 无法正常工作 谁可以帮我这个事 请找到下面的参考文件 index js import React from react import style from header cs
  • React App 中的图像损坏

    我正在尝试访问 React 应用程序中的图像 当我运行代码时 我在网页上看到一个损坏的图像图标 我不确定我是否正在访问图像的正确路径 我的代码如下 import React Component from react class Header
  • 将渐变应用于 Material UI 的主题背景

    我试图将 MuiTheme 的默认背景颜色设置为渐变 我有以下代码 export const theme createMuiTheme palette type dark background default linear gradient
  • 如何使用 next auth 通过自定义 Spring API 库和端点进行身份验证

    我是 Next js 的新手 正在将我的前端从 React 迁移到 Next v4 我已经使用 Spring 开发了一个后端 它连接到 Azure 上托管的 MySQL 数据库 该 API 在 Postman 和 React 前端上经过全面
  • 以编程方式更改 Redux-Form 字段值

    当我使用redux formv7 我发现没有办法设置字段值 现在在我的form 我有两个select成分 当第一个时 第二个的值就会很清楚select元件值改变 在类渲染中 div div site div div div div
  • ReactJS 子级 - 过滤掉空值

    我正在渲染我的组件
  • 调用高阶组件时在 React 中访问类外部的 prop

    我正在尝试使用高阶组件 HOC 模式来重用一些连接到状态并使用 Redux Form formValueSelector 方法的代码 formValueSelector 需要一个引用表单名称的字符串 我想动态地设置它 并且每当我需要项目的值
  • 将两个 JSON 数据合并为具有特定键值的一个

    我有两个 CSV 文件 球数据 json id 1 color red id 2 color blue 法庭 json court id 2001 ball in use 1 court id 2005 ball in use 2 如何根据
  • 如何在 webpack 中渲染嵌套的 SASS?

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc
  • 在 React 中将模板分离到外部文件

    我正在为客户开发 ReactJS 应用程序 我希望客户端能够自定义应用程序中的一些配置和模板 所以我创建了一个config js file window APP CONFIG url example com template item di
  • 在 javascript 文件中设置 firebase-admin sdk

    我的最终目标是使用用户 ID 获取用户电子邮件 到目前为止 我发现我需要使用 firebase admin SDK 现在我有这个代码 var admin require firebase admin var serviceAccount r
  • 使用 React.js + Express.js 发送电子邮件

    我在 ES6 中使用 React js 构建了一个 Web 应用程序 我目前想要创建一个基本的 联系我们 页面并想要发送电子邮件 我是 React 新手 刚刚发现我实际上无法使用 React 本身发送电子邮件 我正在遵循教程nodemail
  • 在react-big-calendar中单击事件时添加弹出窗口?

    当单击事件时 我无法将弹出窗口添加到事件中 弹出窗口似乎只显示在事件槽中 而不是显示在事件槽的顶部 此外 由于我为事件创建了一个自定义组件并尝试在自定义组件中实现弹出窗口 因此只有当我单击事件名称时才会显示弹出窗口 这是代码 class C
  • React 在同一组件中渲染多个模态

    我对 React 和一般编码都很陌生 我试图在同一组件中渲染多个模态 但它们都是同时渲染的 因此看起来所有链接都在最后一个模态中渲染文本 这是状态设置的地方 class Header extends React Component cons
  • ReactJS - Redux Form - 如何根据单选字段元素有条件地显示/隐藏元素?

    我对 Redux 比较陌生 我有一个表单 其中有一些无线电输入 是 或 否 基本上 我想根据该无线电输入选择有条件地显示包含另一个 redux 表单字段的另一个元素 有直接的方法可以做到这一点吗 我想检查一下formProps site v
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 如何使用Create React App安装React

    嗨 我对反应真的很陌生 我不知道如何实际安装它 也不知道我需要做什么才能在其中编写代码 我下载了node js并且安装了v12 18 3以及NPM 6 14 6 但是每次我尝试在许多网站上提到的create react app安装方法中输入
  • React PropTypes 与 Flow

    PropTypes 和 Flow 涵盖相似的内容 但使用不同的方法 PropTypes 可以在运行时向您发出警告 这有助于快速找到来自服务器等的格式错误的响应 但是 Flow 似乎是未来 并且具有泛型等概念 是一个非常灵活的解决方案 Nuc
  • 即使我可以监视其他方法,也无法监视事件处理程序

    我想使用 Jest Jasmine Enzyme 测试 React 中的事件处理程序 MyComponent js import React from react class MyComponent extends React Compon

随机推荐

  • 打印时不会出现日文字符

    我正在用 python 打印 Unicode 字符 到目前为止 除了日语字符之外 我使用过的所有符号都有效 当我打印字符时 它只显示 框中的问号 符号 我怎样才能解决这个问题 当我第一次回答这个问题时 我认为这可能是 python 的问题
  • 如何使用 Spring 注入 ServletContext 进行 JUnit 测试?

    我想对用 Apache CXF 编写的 RESTful 接口进行单元测试 我使用 ServletContext 来加载一些资源 所以我有 Context private ServletContext servletContext 如果我将其
  • Solr 动态价格范围和组

    跟进问题 如何获取 solr 结果中的方面范围 https stackoverflow com questions 33956 how to get facet ranges in solr results SolR 查询 价格范围 htt
  • 瓦廷 Windows 身份验证

    我正在尝试为使用集成身份验证的 Intranet 应用程序编写 Watin 测试 我尝试测试的网页打印 Page User Identity Name 这是我测试的一些代码 if Win32 LogonUser u UserName u D
  • ColdFusion:无效的 XML 控制字符(十六进制)

    我正在尝试使用创建一个 xml 对象
  • 在 .vscode 中调试时遇到问题

    我最近在 VSCODE 中调试时遇到了一个大问题 我尝试通过搜索网站并重新安装一些扩展来自行修复它 而不是在中显示我的结果调试控制台它将以下输出写入我的terminal cd Users AVFL Documents Programming
  • 在 SPA 中加载外部脚本和样式文件

    我有一种 SPA 它使用 API 来获取数据 该 SPA 有一些实例 它们都使用通用样式和脚本文件 所以我的问题是 当我更改这些文件中的一行时 我将必须打开每个实例并更新文件 这对我来说真的很耗时 一种方法是将这些文件放在服务器中的文件夹中
  • 安装 ROS 时 Cmake 未检测到 boost-python

    我一直在尝试在我的 Mac 上安装 ROS 并根据不同版本的 boost 使用不同的库解决了错误 然而 似乎有一个库甚至没有检测到 boost python 这是我得到的错误 CMake Error at usr local share c
  • DevSettings.reload() 用于 React Native 中的注销

    问题 我正在将混合应用程序的注销功能从本机迁移到反应本机 要求 它可以在生产环境和设备上运行 它导航到应用程序的根屏幕 登录屏幕 它清除 redux 存储 很高兴有 它会取消任何飞行中的请求 最初 我们计划做这样的事情 如何重置 redux
  • 字符串格式化表达式 (Python)

    字符串格式化表达式 This is d s example 1 nice 字符串格式化方法调用 This is 0 1 example format 1 nice 我个人更喜欢方法调用 第二个示例 以提高可读性 但由于它是新的 因此随着时间
  • 无法在 css 中使用 .ani 光标?

    我自定义了网站的光标 但是CSS光标 url 仅适用于 gif png 或 cur 我想使用 ani 文件 但它只能在 IE 中使用 cursor url img mcursor cur auto IE 使用 Windows API 支持
  • 如何动态且安全地设置XUL密钥?

    我正在尝试为我的引导附加组件动态创建一个关键元素 目前 我创建了一个keyset元素并将其附加到document getElementById mainKeyset parentNode with appendChild 然后创建key元素
  • 更改二维数组元素的值会更改整个列

    当我打印我的arrvalue 我得到了 2D 数组的正确值 但是当我退出 while 循环时 我的值都是错误的 我不确定我做错了什么 num runs n 4 x np linspace 1 1 n y np linspace 1 1 n
  • 从 Eclipse IDE 在 Tomcat8 中部署 Maven 项目

  • Python错误代码:IndexError:索引错误列表索引超出范围

    我正在尝试用 Python 编写一个模拟赛马的函数 虽然没有获胜者 但它会清除屏幕 显示马匹列表 所有马匹的索引都从零开始 然后 在我标记的行上 代码变得混乱 我发现索引错误列表超出范围 我正在尝试随机选择一匹马 随机选择一个索引号 并将该
  • 哪里可以下载 JSTL jar [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有谁知道 因为我尝试过的所有地方似乎都超时了 您可以下载JSTL 1 1here http archiv
  • ruby 中的 unshift + file.join

    unshift File join File dirname FILE vendor addressable 2 1 0 lib addressable uri 上面的代码是否访问具有以下路径的文件 vendor addressable 2
  • 有没有办法从函数内单击导航链接?

    基本上 我正在延迟导航 单击链接后 onClick 处理程序通过检查条件并调用另一个函数来阻止导航 如果满足特定条件 则仅该页面导航到另一个页面 那么我如何从该函数中触发 Navlink 单击 我能够通过使用解决这个问题event prev
  • 表单请求中的 Laravel 数组验证

    我无法验证 Form Request 类中包含数组元素的字段 规则方法 public function rules return state gt required state 0 gt required state gt required
  • 如何在reactjs中重新加载组件(页面的一部分)?

    我当时正在做反应项目 当我们单击重新加载按钮时 我试图重新加载组件 我实现了 onClick 函数 如下所示 但它正在重新加载整个窗口 我只想重新加载该类组件 而不是整个窗口 谁能帮我解决这个问题吗 refreshPage window l