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;

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

相关推荐
星辰中的维纳斯35 分钟前
vue新手入门教程(项目创建+组件导入+VueRouter)
前端·javascript·vue.js
miao_zz1 小时前
react native中依赖@react-native-clipboard/clipboard库实现文本复制以及在app中获取复制的文本内容
android·react native·react.js
嫣嫣细语1 小时前
css实现鼠标禁用(鼠标滑过显示红色禁止符号)
前端·css
Days20501 小时前
web前端主要包括哪些技术
前端
XF鸭1 小时前
HTML-CSS 入门介绍
服务器·前端·javascript
forwardMyLife2 小时前
element-plus 的form表单组件之el-radio(单选按钮组件)
前端·javascript·vue.js
fs哆哆2 小时前
ExcelVBA运用Excel的【条件格式】(二)
linux·运维·服务器·前端·excel
安冬的码畜日常2 小时前
【CSS in Depth 2精译】2.5 无单位的数值与行高
前端·css
ilisi_2 小时前
导航栏样式,盒子模型
前端·javascript·css
吉吉安3 小时前
grid布局下的展开/收缩过渡效果【vue/已验证可正常运行】
前端·javascript·vue.js