javascript - 将路径参数传递给 React 上下文提供者

Question

我有一个 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>
        );
    }
}

Answer 1

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)将强制重新渲染(上下文连接的组件)。