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;

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

相关推荐
Jackson__23 分钟前
谈一下 css 隐藏陷阱,margin 塌陷问题
前端·css
奇舞精选23 分钟前
前端开发中常见的 SEO 优化
前端·seo
奇舞精选23 分钟前
使用cursor和claude-3.7实现吉卜力风格的页面
前端
白鸽(二般)40 分钟前
HTML、CSS、JavaScript
前端·css
大强的博客1 小时前
《Vue Router实战教程》22.导航故障
前端·javascript·vue.js
会蹦的鱼1 小时前
知识了解02——了解pnpm+vite+turbo+monorepo的完整构建步骤(react子项目)
前端·javascript·react.js
@PHARAOH1 小时前
HOW - 如何测试 React 代码
前端·react.js·前端框架
涵信1 小时前
第三节:React 基础篇-React组件通信方案
前端·javascript·react.js
90后的晨仔1 小时前
Flutter 报错 [☠] Network resources (the doctor check crashed)xxxx
前端·flutter