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

Question

我正在用 ReactJs + Redux 编写我的第一个应用程序。它变得越来越复杂，添加了更多的爱慕提供者，所以我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>,

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

标签： javascriptreactjsreact-redux

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