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

问题是：有什么方法可以避免这种层次结构，并以一种更加优雅的方式编写它？

Answer 1

您可以结合使用Higher order components和recompose来创建类似以下内容的

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

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

1 个答案: