react 重新加载子组件

在React中,要重新加载某个子组件,你可以通过改变该组件的key属性来强制它重新渲染。这是因为React会在key变化时销毁旧的组件实例并创建一个新的实例。

多的不说直接上代码

javascript 复制代码
import React, { useState } from 'react';
import ChildComponent from '../childComponent.jsx';
 
const ParentComponent = () => {
  const [reloadKey, setReloadKey] = useState(0);
 
  const reloadChild = () => {
    setReloadKey(reloadKey + 1);
  };
 
  return (
    <div>
      <button onClick={reloadChild}>点我</button>
      <ChildComponent key={reloadKey} />
    <div/>
  );
};
 
export default ParentComponent;

注:本人前端小白 ,如有不对的地方还请多多指教

相关推荐
明远湖之鱼11 分钟前
从代码到像素:浏览器渲染原理与 React Fiber 架构的深度协作
前端·react.js·浏览器
Knight_AL29 分钟前
Spring Cloud Alibaba 项目中DataSource 配置失败?原来是 application.yml 和 bootstrap.yml 的坑
前端·bootstrap·html
怎么就重名了1 小时前
Kivy的属性系统
java·前端·数据库
hxjhnct2 小时前
JavaScript Promise 的常用API
开发语言·前端·javascript
web小白成长日记2 小时前
前端让我明显感受到了信息闭塞的恐怖......
前端·javascript·css·react.js·前端框架·html
GIS之路2 小时前
GDAL 实现创建几何对象
前端
liulilittle3 小时前
CLANG 交叉编译
linux·服务器·开发语言·前端·c++
自信阿杜3 小时前
跨标签页数据同步完全指南:如何选择最优通信方案
前端·javascript
牛马1113 小时前
WidgetsFlutterBinding.ensureInitialized()在 Flutter Web 端启动流程的影响
java·前端·flutter
Captaincc3 小时前
2025: The year in LLMs
前端·vibecoding