reactjs - 在 中使用

Question

1- 我想像下面这样用“ModelStateProvider”包装“Model”组件，但它不起作用。我搜索了谷歌，找不到任何实用的解决方案。我想知道是否有办法让它发挥作用。

2- 我想知道用“ModelStateProvider”(如“AuthStateProvider”)包装整个应用程序是否实用且高效，但请记住，我将仅使用“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>
  )
}

编辑:在路线内渲染它修复了它。由于我需要路径，所以我将其作为 Prop 传递。您可以在下面查看解决方案。

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

Answer 1

您可以使用隐式的children prop，而不是将component prop 传递给路由，这就是the documentation for Switch shows in the example。 .

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

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

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

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

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