如何避免 reactjs 索引中的复杂层次结构

Question

我正在用ReactJs + Redux编程我的第一个应用程序。它变得越来越复杂，添加了更多的amore提供商，所以我的index.js开始看起来有点丑陋：

ReactDOM.render(
<Provider store={store}>
<IntlProvider locale={language} messages={messages[language]}>
<AlertProvider template={AlertTemplate} {...options}>
<BrowserRouter>
<div className='main'>
<Header />
<div className="content">
<Switch>
[...]
<Route path="/list" component={List} />
<Route path="/message" component={MessageList} />
[...]
</Switch>
</div>
<Footer />
</div>
</BrowserRouter>
</AlertProvider>
</IntlProvider>
</Provider>,

问题是：有没有办法避免这种层次结构并以更优雅的方式编写相同的内容？

Answer 1

您可以使用高阶组件的组合并重构来创建如下所示的内容

ReactDOM.render(
compose(
Provider({ store }),
IntlProvider({ locale: language, messages: messages[language] }),
AlertProvider({ template: AlertTemplate, ...options }),
BrowserRouter(),
// ... Add more HOCs here
)(
<div className="main">
<Header />
<div className="content">
<Switch>
[...]
<Route path="/list" component={List} />
<Route path="/message" component={MessageList} />
[...]
</Switch>
</div>
<Footer />
</div>,
),
);