javascript - react : Which Order to "wrap" components with HOC?

Question

我会对如何使用 HOC(高阶组件)按什么顺序包装组件的方式感兴趣，例如:

const app = (
    //Provider has to wrap everything
    <someContext.Provider value={{message:"Ringeldingeldong"}}>
        <Provider store={store}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
    </someContext.Provider>
)

编辑:正如我发现的那样，哪个组件包装另一个组件没有任何区别，似乎没有关于如何使用 HOC 包装组件的命令(至少对于 Router、ContextProvider 和 Redux store 来说是这样...... )

在这种情况下，browserRouter 只能有 1 个 child ，但是如果我还想为我的 App 组件使用一些全局上下文 Provider 怎么办？如果我还想对我的所有组件使用 react-redux 呢？

在 HOC 中使用和包装这些组件的一般顺序是什么，这通常是否可以与其他 HOC 多次包装组件？

Answer 1

你可以通过在你的主要组件中从 react-router-dom 库中导入 Router、Route 和 Switch 并在 JSX 中用 Provider 包装 Router 来做到这一点，例如

App.js

...
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import { Provider } from 'react-redux'
import store from './store'

const App = () => {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route exact path='/about' component={About} />
          <Route exact path='/login' component={Login} />
          <Route exact path='/register' component={Register} />
        </Switch>
      </Router>
    </Provider>    
  );
}

export default App;

通过这种方式，您可以在 Route 中的所有组件中从 Redux 获取 props