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 存储来说是这样的...... )

在这种情况下，browserRouter 只能有 1 个子级，但是如果我还想为我的应用程序组件使用一些全局上下文提供程序怎么办？如果我想另外为我的所有组件使用react-redux？

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

Answer 1

您可以通过在主组件中从react-router-dom库导入路由器、路由和交换机来实现这一点，并在JSX中用Provider包装路由器，例如

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