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;

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

相关推荐
JamesGosling66615 小时前
深入理解内容安全策略(CSP):原理、作用与实践指南
前端·浏览器
不要想太多15 小时前
前端进阶系列之《浏览器渲染原理》
前端
七喜小伙儿15 小时前
第2节:趣谈FreeRTOS--打工人的日常
前端
我叫张小白。15 小时前
Vue3 响应式数据:让数据拥有“生命力“
前端·javascript·vue.js·vue3
laocooon52385788615 小时前
vue3 本文实现了一个Vue3折叠面板组件
开发语言·前端·javascript
IT_陈寒15 小时前
React 18并发渲染实战:5个核心API让你的应用性能飙升50%
前端·人工智能·后端
科普瑞传感仪器15 小时前
从轴孔装配到屏幕贴合:六维力感知的机器人柔性对位应用详解
前端·javascript·数据库·人工智能·机器人·自动化·无人机
n***F87516 小时前
SpringMVC 请求参数接收
前端·javascript·算法
wordbaby16 小时前
搞不懂 px、dpi 和 dp?看这一篇就够了:图解 RN 屏幕适配逻辑
前端
程序员爱钓鱼16 小时前
使用 Node.js 批量导入多语言标签到 Strapi
前端·node.js·trae