umiJS+React同一路由刷新子组件（父子组件间传值）

需求背景

右侧组件选择完条件后，再点击当前选中的菜单，右侧组件未更新。

解决办法

利用react中的key让组件重新渲染。

当key发生改变时，组件会先销毁然后新建。

公司项目页面结构大致是一个大的layout，包含左侧菜单和右侧body两个子组件。

因此这一块需要用到父子组件间传值。

// 父页面部分代码
const [activeId, setActiveId] = useState("");

function changeActiveId() {
    setActiveId(() => Math.random())
}

<div>
    // 通过props传递给子组件 在子组件中调用
    <AsideNav changeActiveId={changeActiveId} />
       
    // 当activeId更新后 重新渲染子组件
    <body key={activeId}></body>
</div>
//子组件部分代码
// 在需要的地方调用父组件的方法
const { changeActiveId } = this.props;     
changeActiveId()

 

posted @ 2022-08-23 17:03  heshibina  阅读(4278)  评论(0)    收藏  举报