在React中,可以通过在父组件上单击按钮来刷新子组件。下面是一种实现方式:
import React, { useState } from 'react';
function ParentComponent() {
const [refresh, setRefresh] = useState(false);
const handleClick = () => {
setRefresh(!refresh);
};
return (
<div>
<button onClick={handleClick}>刷新子组件</button>
<ChildComponent refresh={refresh} />
</div>
);
}
import React, { useEffect } from 'react';
function ChildComponent({ refresh }) {
useEffect(() => {
// 在这里执行子组件需要刷新的操作
console.log('子组件刷新了');
}, [refresh]);
return <div>子组件</div>;
}
在上述代码中,当父组件的按钮被点击时,会触发handleClick函数,该函数会修改refresh状态变量的值,从而触发子组件的刷新。子组件中的useEffect钩子函数会监听refresh状态变量的变化,当refresh发生变化时,会执行相应的操作。
这种方式可以实现在父组件上单击按钮来刷新子组件的效果。
领取专属 10元无门槛券
手把手带您无忧上云