gpt4 book ai didi

reactjs - 重定向时重新初始化类

转载 作者:行者123 更新时间:2023-12-03 14:14:15 24 4
gpt4 key购买 nike

我目前在http://example.com/parentdir/module/2/

此 URL 实际上加载 Module.js 类,如以下路由所示:

<Route exact path={"/parentdir/module/:id"} component={Module} />

这包含在 <BrowserRouter> 中和<Switch>在我的 index.js 文件中定义的元素。

Module 类有一个 constructorcomponentWillMount方法。这些设置了记录 #2 的初始详细信息和加载信息。到目前为止一切正常。

现在,我的问题是,在 Module.js 的孙子组件中,我使用以下重定向重定向到另一个页面,例如第 3 页:

return (
<Redirect to="/parentdir/module/3/" />
)

构造函数或 componentWillMount 不会运行,因此记录 #3 无法正确加载。这是因为该组件从加载记录 #2 时就已经加载到内存中了吗?重新加载 Module.js 以便正确加载记录 #3 的最佳方法是什么?我是否必须以某种方式重新初始化该类?或者我是否必须以某种方式将数据从孙子组件传递回模块类?后一种方法似乎很乏味。

为了澄清一下,如果我直接转到 http://example.com/parentdir/module/3在地址栏中,一切正常,但如果我在 ReactJS 环境中重定向到同一地址,它就无法正常工作。

更新

到目前为止,我的问题已经得到了两个答案。一种解决方案建议使用 componentWillReceiveProps。另一种解决方案建议将方法作为支柱传递给子代,然后传递给孙子。使用这些方法各有利弊,还是只是一个偏好问题?

最佳答案

idthis.props.params.id 的形式作为 prop 传递,因此您应该使用 componentWillReceiveProps 生命周期方法,每次 props 发生变化时都会运行,这就是您的案例中发生的情况。

当您作为组件从 /parentdir/module/2 导航到 /parentdir/module/3 时,componentWillMount 方法将不会运行已经安装。它只会在您从其他组件导航时运行(例如,当您直接访问时)。

在您的 Module 组件中添加此生命周期方法

componentWillReceiveProps(nextProps){
if(nextProps.params.id != this.props.params.id){
//load information etc (whatever you are doing in componentWillMount)
}
}

发生的情况是,当它收到更新的 props 集时,它会比较参数 id 是否已更改(所有路由参数都位于 params 对象在 props 中),当它发现有变化时,它会执行逻辑。比较并不是真正必要的,您可以按照 componentWillReceiveProps 方法中的方式添加逻辑,但这会效率低下,因为每次 props 对象发生更改时都会调用它(可能不是id 参数)。

关于reactjs - 重定向时重新初始化类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43601156/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com