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;

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

相关推荐
无光末阳9 分钟前
vue 环境下多个定时器的创建与暂停的统一封装
前端·vue.js
Hilaku11 分钟前
技术Leader的“第一性原理”:我是如何做技术决策的?
前端·javascript·面试
liyf12 分钟前
发布-订阅(Publish–Subscribe) vs 观察者模式(Observer Pattern)
前端
云中雾丽18 分钟前
Flutter 里的 Riverpod 用法解析
前端
前端snow38 分钟前
记录:非常典型的一个redux问题
前端
慧一居士1 小时前
src/App.vue 和 public/index.html 关系和区别
前端·vue.js
九十一1 小时前
websocket的连接原理
前端·javascript
念你那丝微笑1 小时前
vue实现批量导出二维码到PDF(支持分页生成 PDF)
前端·vue.js·pdf
Renounce1 小时前
《Android Handler:线程间通信的核心实现》
前端
CAD老兵1 小时前
打造高性能二维图纸渲染引擎系列(一):Batched Geometry 助你轻松渲染百万实体
前端·webgl·three.js