将路径参数传递给 React 上下文提供程序答案

【问题标题】：Passing path parameter to a React context provider将路径参数传递给 React 上下文提供程序
【发布时间】：2020-05-20 07:57:32
【问题描述】：

我有一个 React 上下文，它为子组件提供“项目”信息，我希望保留与包含在上下文类中的项目数据相关的所有内容。这方面的一个示例是从服务器检索项目信息的“refreshProject”函数。挑战在于：如何将作为 URL 参数的 projectID 传递到上下文类中？在下面的代码中，我目前是把它传入refresh函数本身，这意味着所有想要调用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>
        );
    }
}

【问题讨论】：

标签： javascript reactjs react-context

【解决方案1】：

挑战在于：如何将作为 URL 参数的 projectID 传递到上下文类中？

当然根据上下文：

    this.state = {
        projectID: null,
        project: null,
        refreshProject: this.refresh
    }

所有想要调用 refreshProject 的子组件都需要从 URL 中提取 ID

不正确，可以从路由器读取（道具位置等）

使上下文提供者在路由器外部（路由应该是交换机直接子级）

<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;（来自路由器道具的ID），然后调用this.context.refreshProject() - 绑定后可以使用this.state.projectID 发出API 请求。完成更新后的上下文（使用 setState）将强制重新渲染（上下文连接的组件）。

【讨论】：