我有一个 React 上下文,它向子组件提供“项目”信息,并且我希望保留与上下文类中包含的项目数据相关的所有内容。一个例子是“refreshProject”函数,它从服务器检索项目信息。挑战是:如何将作为 URL 参数的projectID 传递到上下文类中?在下面的代码中,我目前将其传递给刷新函数本身,这意味着所有想要调用refreshProject的子组件都需要从URL中提取ID,这是笨拙的。我可以想到几种方法,但我很好奇什么才是最佳实践。
这是 URL 中包含项目 ID 的包装路由:
<Switch>
[other routes here]
<ProjectContextProvider>
<AuthenticatedRoute path="/project/:id" exact component={Project} props={childProps} />
</ProjectContextProvider>
</Switch>
ProjectContextProvider 类如下所示:
import React, { Component, createContext } from 'react';
import { API } from '../Services'
export const ProjectContext = createContext();
export class ProjectContextProvider extends Component {
constructor(props) {
super(props);
this.refresh = this.refresh.bind(this);
this.state = {
project: null,
refreshProject: this.refresh
}
}
// This is what I have
refresh(projectID) {
API.getProject(projectID).then(project => {
this.setState({ project });
});
}
// This is what I want
// refresh() {
// API.getProject(this.projectID).then(project => {
// this.setState({ project });
// });
// }
render() {
return (
<ProjectContext.Provider value={{...this.state}}>
{this.props.children}
</ProjectContext.Provider>
);
}
}
最佳答案
The challenge is: how to pass the projectID, which is a URL param, into the context class?
当然根据上下文:
this.state = {
projectID: null,
project: null,
refreshProject: this.refresh
}
all child components that want to call refreshProject need to pull the ID from the URL
不正确,它可以从路由器读取( Prop 位置等)
将上下文提供者置于路由器外部(路由应该是交换机的直接子级)
<ProjectContextProvider>
<Switch>
[other routes here]
<AuthenticatedRoute path="/project/:id" exact component={Project} props={childProps} />
</Switch>
</ProjectContextProvider>
将状态直接传递给提供者,而不传播(它创建一个新对象,我们要传递一个引用)
<ProjectContext.Provider value={this.state}>
{this.props.children}
</ProjectContext.Provider>
在 <Project/>
直接变异(通常不建议)projectID
在上下文中(不使用 setState
,更改不传播,依赖项不重新渲染) this.context.projectID = someID;
(来自 router props 的 id),然后调用 this.context.refreshProject()
- 它已绑定(bind)然后可以使用 this.state.projectID
发出 API 请求。完成更新后的上下文(使用 setState)将强制重新渲染(上下文连接的组件)。
关于javascript - 将路径参数传递给 React 上下文提供者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60058244/