Question

我有一个React上下文，它向子组件提供“项目”信息，并且我希望将与项目数据相关的所有内容保留在上下文类中。一个示例是“ refreshProject”函数，该函数从服务器检索项目信息。挑战在于：如何将projectID（这是一个URL参数）传递到上下文类中？在下面的代码中，我当前将其传递给refresh函数本身，这意味着所有要调用refreshProject的子组件都需要从URL中提取ID，这很笨拙。我可以想到几种解决方案，但我很好奇这里将被视为最佳实践。

这是包含URL中包含的项目ID的包装路线：

SetVariable

ProjectContextProvider类如下：

<Switch>
    [other routes here]

    <ProjectContextProvider>
        <AuthenticatedRoute path="/project/:id" exact component={Project} props={childProps} />
    </ProjectContextProvider>
</Switch>

Answer 1

挑战是：如何将projectID （这是一个URL参数）传递到上下文类中？

当然根据上下文：

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

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

1 个答案: