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

我正在用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>,

ReactDOM.render(
[...]
[...]
,

---

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

您可以使用和的组合来创建如下内容

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>,
    ),
);

ReactDOM.render(
谱写(
提供程序（{store}），
IntlProvider（{locale:language，messages:messages[language]}），
AlertProvider（{template:AlertTemplate，…options}），
浏览器路由器（），
//…在此添加更多HOC
)(
[...]
[...]
,
),
);