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

Posted 2023-04-14

【中文标题】将路径参数传递给 React 上下文提供程序

【英文标题】：Passing path parameter to a React context provider

【发布时间】：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>
        );
    

【参考方案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）将强制重新渲染（上下文连接的组件）。