假设我想在我的项目中有一个可重用的 React 组件。我还希望该组件在不同位置具有其状态,而不会在组件卸载期间丢失它。在 React 中处理这种架构的正确方法是什么?换句话说,当用户在这两条路由之间导航时,react 会卸载前一个组件,因此它会在 /user 和 /groups 路由之间的每个导航上加载远程数据。
我也知道有一种叫做 Redux 的东西。我没有看到如何使用reduce来做到这一点的明确方法。我需要两个减速器吗?一个用于用户,另一个用于组?如果是这样,每次当我需要使用 ReusableComponent 时,创建一个新的 reducer 并编写新的逻辑是很不方便的。
这是一个类似的骨架来描述我正在尝试做的事情。任何提示都会有所帮助。
//Router example
<Router>
<Switch>
<Route exact path=”/users” >
<UserComponent>
<ReusableComponent url=”http://apidomain.com/users” />
</UserComponent>
</Route>
<Route exact path=”/groups” >
<GroupComponent>
<ReusableComponent url=”http://apidomain.com/groups” />
</GroupComponent>
</Route>
</Switch>
</Router>
//ReusableComponent Example
<ReusableComponent>
--->use url, that passed from parent component tree(users or groups) to load data and keep in state
<ReusableComponentContext>
<Head />
<Body />
<Footer />
</ReusableComponentContext>
</ReusableComponent>
编辑 因此,为了更好地描述我的问题,我需要在不同位置拥有具有两个或多个并行状态的相同组件,而不会相互覆盖。如果可能
答案 0 :(得分:0)
我会使用“React Context”api。上下文包装您的应用程序,因此如果一个组件更新/重新呈现存储在上下文中的状态保持不变。要使用 Context,您需要三个文件:
"UserContext" = 示例 => 重命名!
import { createContext } from "react"
export const UserContext = createContext(initValue)
//文件名:UserContext.js
//* import React, { useState } from "react"
//* import UserContext from "./UserContext"
const [state, setState] = useState("initState")
//* return(
<UserContext.Provider value={{state, setState}}> //value="props"
<ChildComponent/>
</UserContext.Provider>
//*import React, { use Context } from "react";
//*import {UserContext} from "./UserContext"
const data = useContext(UserContext) //here "UserContext"
源代码:short explenation of usage
为了避免一个 import-statement,你可以像这样创建一个自定义 Hook
import React, { use Context } from "react";
import {UserContext} from "./UserContext";
const useUserContext = (()=>{
const {state, setState} = useContext(UserContext)
//use effect if you want to set the context? with the hook...
return[state, setState]
})
在您的重新安装组件中
import useUserContext from "./useUserContext"
//rfce{
const {state, setState} = useUserContext()
//}
答案 1 :(得分:0)
您可以将 ReusableComponent
连接到您的 Redux 存储区(有关详细信息,请参阅 connect)。
import { connect } from "react-redux";
const ReusableComponent = (props) => {
// some logic before return
return <div>{props.magicProperty}</div>
}
const mapStateToProps = (state) => ({ magicProperty: state.magicProperty });
return connect(mapStateToProps)(ReusableComponent);
因此,每次您在应用中使用 ReusableComponent
时,magicProperty
都是共享的,您还可以将一些操作连接到组件,以便在经典 Redux 流程中管理该部分状态。< /p>
答案 2 :(得分:0)
我想我找到了解决方案。就我而言,我对在路由器组件树中放置上下文提供程序标签的级别有一些误解。所以在 React 中,将上下文提供程序包装器放在正确的位置非常重要。它仅为由该上下文提供程序包装的那些子组件持有一个专用状态。
在我的例子中,我在 ReusableComponent 里面有 ReusableComponentContext,这是错误的方法因为我在任何地方使用 ReusableComponent 它都有单独的上下文(因此个人状态)。我将 ReusableComponentContext 移到几个组件的顶部来解决我的问题。