时间戳

首页 > 解决方案 > 使用代替

reactjs - 使用代替

问题描述

1-我想用“ModelStateProvider”包装“模型”组件，如下所示，但它不起作用。我搜索了谷歌，找不到任何实用的解决方案。我想知道是否有办法让它工作。

2-我想知道用“AuthStateProvider”之类的“ModelStateProvider”包装整个应用程序是否实用且有效，但请记住，我将仅使用“Model”组件来使用“ModelStateProvider”。

你能帮我想想吗？

谢谢 ：]

const App = () => {
  return (
    <AuthStateProvider>
      <Router>
        <Navbar />
        <main className='container'>
          <Route exact path='/' component={Homepage} />
          <Switch>
            <Route exact path='/signin' component={Signin} />
            <Route exact path='/signup' component={Signup} />
            <ModelStateProvider>
              <Route exact path='/model/:link' component={Model} />
            </ModelStateProvider>
            <Route exact path='/models' component={Models} />
            <Route exact path='/profiles' component={Profiles} />
            <PrivateRoute exact path='/account' component={Account} />
            <PrivateRoute exact path='/publish' component={Publish} />
          </Switch>
        </main>
      </Router>
    </AuthStateProvider>
  )
}

编辑： 在 Route 内渲染它修复了它。由于我需要路径，因此我将其作为道具传递。您可以在下面看到解决方案。

<Route
  exact
  path='/model/:link'
  render={(path) => (
    <ModelStateProvider>
      <Model path={path} />
    </ModelStateProvider>
  )}
/>

标签： reactjsstatereact-context

解决方案

component您可以使用隐式prop，而不是将 prop 传递给路由，children这就是Switch 文档在 example 中显示的内容。

<Switch>
  <Route … />
  <Route exact path='/model/:link'>
    <ModelStateProvider>
      <Model />
    </ModelStateProvider>
  </Route>
  …
</Switch>

如果这不满足您对路由或路由匹配的约束，或者由于某种原因您无法将所有路由器道具传递给提供者的直接子级，则可以制作一个包装提供者和模型的复合组件：

const ModelWithProvider = (props) => (
  <ModelStateProvider>
    <Model {...props} />
  </ModelStateProvider>
);

// …
<Switch>
  <Route … />
  <Route exact path='/model/:link' component={ModelWithProvider} />
  …
</Switch>

如果这不起作用或由于某种原因无法提前包装，你可以用 . 包装Switch（或Router，或任何你想要的祖先）ModelStateProvider。您在问题中提到了这一点，但除了“效率”之外，您没有解释为什么或如何对您不起作用。当您尝试这样做时，您的应用程序是否有明显低效的地方？

推荐阅读