React：使用 HOC 对 "wrap" 组件的顺序是什么？

Question

我会对如何使用 HOC（Higher-order 组件）以何种顺序包装组件的方式感兴趣，例如：

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 library 导入路由器、路由和交换机，然后 wrap Router 来做到这一点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

React：使用 HOC 对 "wrap" 组件的顺序是什么？

React: Which Order to "wrap" components with HOC?

javascript

reactjs

wrapper

higher-order-components