创建所有其他组件都被读取的主组件，以便它们继承 .container

Question

"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.1.2",
"react-router-redux": "^5.0.0-alpha.9",

我从事 React 项目已经有一段时间了，现在才意识到我拥有的 app.js "master" 组件实际上根本没有做任何事情。我的印象是我的所有其他组件都在阅读它。（一旦我意识到，就像，"Oh yeah, why would it?"）。

这给我带来了一个问题：我需要将 .container 和 .container-fluid 标签放在每个组件中，或者我需要将它们放在 index.js.我想避免这两种情况：前者是因为冗余，后者是因为想要将格式保留在 index.js.

之外

那么我该如何重构它，使附加到这些路由的组件通过 "master" 组件发送，以便可以应用诸如此类的格式标签？

这是我的 index.js 和我的 app.js（结果什么也没做）：

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { routerMiddleware, ConnectedRouter } from 'react-router-redux';

import createHistory from 'history/createBrowserHistory';

// Render on every route
import App from './components/app';
import Navigation from './containers/global/navbar';
import Footer from './containers/global/footer';

// Route specific
import Signin from './containers/authentication/signin';
import Signout from './containers/authentication/signout';
import ResetPassword from './containers/authentication/reset_password';
import SetPassword from './containers/authentication/set_password';
import RecoverUsername from './containers/authentication/recover_username';
import NewAccount from './containers/authentication/new_account';
import SetupUser from './containers/authentication/setup_user';
import SecurityQuestions from './containers/authentication/security_questions';
import Home from './components/home';
import Help from './components/help';

// HoC to wrap protected routes in
import Timers from './helpers/timers';
import RequireAuth from './helpers/require_auth';

// Reducers 
import rootReducer from './reducers';

// Global app styles
import styles from '../assets/scss/app.scss';

// IE polyfill error fix
require('es6-promise').polyfill();
var axios = require('axios');

const history = createHistory();

const initialState = {};
const enhancers = [];
const middleware = [thunk, routerMiddleware(history)];

if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = window.devToolsExtension

    if (typeof devToolsExtension === 'function') {
        enhancers.push(devToolsExtension())
    }
}

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const protectedRoute = compose(Timers, RequireAuth);

const store = createStore(rootReducer, initialState, composedEnhancers);

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <div>
                <Navigation />
                <App />
                <Switch>
                    <Route exact path='/home' component={protectedRoute(Home)} />
                    <Route exact path='/help' component={protectedRoute(Help)} />
                    <Route exact path='/auth/username' component={RecoverUsername} />
                    <Route exact path='/auth/new_account' component={NewAccount} />
                    <Route exact path='/auth/password' component={ResetPassword} />
                    <Route exact path='/auth/signout' component={Signout} />
                    <Route exact path='/auth/signin' component={Signin} />

                    <Route exact path='/auth/security_questions/f=:f&i=:id&k=:key' component={SecurityQuestions} />
                    <Route exact path='/auth/set_password/f=:f&i=:id&k=:key' component={SetPassword} />
                    <Route exact path='/auth/setup_user/f=:f&i=:id&k=:key' component={SetupUser} />
                    <Route exact path='/' component={Signin} />
                </Switch>
                <div id='gap'></div>
                <Footer />
            </div>
        </ConnectedRouter>
    </Provider>
    , document.querySelector('.app'));

// app.js
import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}

Answer 1

好的，这是一件非常直接而且非常直观的事情...

在 index.js 中，我刚刚将 <App /> 更改为：

<App>
    <Switch>
    // all the routes...
    </Switch
</App>

正如人们所期望的那样工作。

创建所有其他组件都被读取的主组件，以便它们继承 .container

Creating master component that all other components are read through so they inherit .container

reactjs

react-router-v4

react-router-redux

react-router-dom