2017-02-19 114 views
1

我正在研究一個反應應用程序,在這個應用程序中,我們在頂部,側面導航欄和頁腳上標題,通常每個應用程序都有它。我的應用程序佈局看起來不太好.top標題很好,但頁面內容總是左側。下面 是我index.js代碼反應佈局看起來不太好

import React ,{ Component } from 'react'; 
import {render} from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { Router, Route, browserHistory, IndexRoute } from 'react-router'; 
import routes from './routes.jsx'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
import theme from './material_ui_raw_theme_file.jsx'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import NotFoundPage from './staticComponents/NotFoundPage.jsx'; 
import configureStore from './store/configureStore.jsx'; 
import { syncHistoryWithStore, routerReducer} from 'react-router-redux'; 
import App from './components/App.jsx'; 
import Home from './components/home.jsx'; 
import ProjectIndex from './pages/projectIndex.jsx'; 
import SignIn from './components/SignInForm.jsx'; 

//for React Developer Tools 
window.React = React; 

const store = configureStore(); 
const history = syncHistoryWithStore(browserHistory, store) 

injectTapEventPlugin(); 

render(
    <MuiThemeProvider muiTheme={theme}> 
    <Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={App}> 
     <IndexRoute component = {Home} /> 
     <Route path="/home" component={Home} /> 
     <Route path="/project" component={ProjectIndex} /> 
     <Route path="/signin" component={SignIn} /> 
     <Route path="*" component={NotFoundPage}/> 
     </Route> 
    </Router> 
    </Provider> 
    </MuiThemeProvider> 
    , document.getElementById('body') 

);

而且App.jsx代碼: -

class App extends Component { 
    constructor(props){ 
    super(props) 
    this.state = { 
     logged: false, 
    }; 
    } 
    render() { 

    return (
     <div className="page_container"> 
     <div> 
     <AppBar 
      title="Issue Tracker" 
      iconElementRight={<Logged />} 
     /> 
     </div> 
     <div>  
      {this.props.children} 
     </div> 
     </div> 

    ); 
    } 
} 

export default App; 

而且Home.jsx代碼: -

import React ,{Component} from 'react'; 
class Home extends Component{ 
    constructor(props){ 
    super(props) 
    } 
    render(){ 
    return(
     <div> 
     <h1>Hi this is home</h1> 
     </div> 
    ) 
    } 
} 

export default Home; 

和放出來是 enter image description here

任何幫助將是巨大的。 感謝

+0

我們需要查看組件的代碼,並可能需要查看問題的屏幕截圖。你提供的代碼是不夠的。 –

回答

1

您需要將樣式添加到div,你注入你props.children,你可以嘗試這樣的事:

class App extends Component { 
    constructor(props){ 
    super(props) 
    this.state = { 
     logged: false, 
    }; 
    } 
    render() { 

    return (
     <div className="page_container"> 
     <div> 
     <AppBar 
      title="Issue Tracker" 
      iconElementRight={<Logged />} 
     /> 
     </div> 
     <div className="main-content-wrapper">  
      {this.props.children} 
     </div> 
     </div> 

    ); 
    } 
} 

export default App; 

而且在你的CSS:

.main-content-wrapper { 
    width: 700px; 
    margin: auto; 
} 

.main-content-wrapper { 
    padding: 20px; 
} 

現在由你來決定它的樣式,因爲你喜歡它。

+0

感謝您的幫助。它的工作現在好了.. – Meesam

+0

請標記答案是正確的,如果那樣的話:) – Canastro

相關問題