Phản ứng, Redux, Phản ứng-Router - Stuck tại cài đặt tài liệu-ui

Question

Hướng dẫn:

Tuy nhiên kể từ khi tôi đang sử dụng Redux và phản ứng router tôi có thể không thực sự đặt MuiThemeProvider để phía trên cùng của chuỗi. Cách tốt nhất để đưa thư viện này là gì?

Đó là chức năng ReactDOM.render tôi:

ReactDOM.render(
    <Provider store={store}> 
    <div> 
     {devTools} 
     <Router history={history} routes={getRoutes(actions.logout)}/> 
    </div> 
    </Provider>, 
    document.getElementById('root') 
); 

Và đó là router:

export default (onLogout) => (
    <Route path="/" name="app" component={App}> 
    <IndexRoute component={SimpleListComponent}/> 
    <Route path="register" component={RegisterPage}/> 
    <Route path="private" component={privateRoute(PrivatePage)}/> 
    <Route path="login" component={LoginPage}/> 
    <Route path="logout" onEnter={onLogout}/> 
    </Route> 
); 

Answer 1

Tôi đã làm nó như vậy. Tôi có một tệp index.js được tham chiếu bởi package.json của tôi làm tệp chính để bắt đầu (với khởi động npm). Trong đó tôi đã (loại bỏ một số hàng nhập khẩu và như vậy cho ngắn gọn):

import './stylesheets/fonts.css'; 
import './stylesheets/main.css'; 

injectTapEventPlugin(); 

// custom MuiTheme overriding the getMuiTheme() values 
const muiTheme = getMuiTheme({ 
    palette: { 
    textColor: cyan500, 
    }, 
    appBar: { 
    color: grey300, 
    textColor: cyan500, 
    height: 50 
    }, 
}); 

const Index =() => (
    <MuiThemeProvider muiTheme={muiTheme}> 
    <Root /> 
    </MuiThemeProvider> 
) 

render(
    <Index />, 
    document.getElementById('app') 
); 

đó phụ thuộc vào một tập tin gốc, được tìm thấy trong container của tôi/Root.jsx file:

const store = configureStore(); 

// Create an enhanced history that syncs navigation events with the store 
const history = syncHistoryWithStore(browserHistory, store); 

let onUpdate =() => {window.scrollTo(0, 0); }; 

export default class Root extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <div> 
      <Router history={history} onUpdate={onUpdate}> 
      <Route path="/" component={App}> 
       <IndexRoute component={Home}/> 
       <Route path="home" component={Home}/> 
       <Redirect path="*" to="/" /> 
      </Route> 
      </Router> 
      <DevTools/> 
     </div> 
     </Provider> 
    ); 
    } 
} 

Tiếp theo là App , chứa bố cục ban đầu của ứng dụng của tôi (trong tập tin vùng chứa/tệp App.jsx của tôi):

export default class App extends Component { 
    constructor(props, context) { 
    super(props, context); 
    } 

    static propTypes = { 
    children: PropTypes.node 
    } 

    render() { 
    return (
     <Grid fluid> 
     <Row> 
      <Col> 
      <Header active={this.props.active} /> 
      </Col> 
     </Row> 
     <Row> 
      <Col> 
      {this.props.children} 
      </Col> 
     </Row> 
     <Row> 
      <Col> 
      <Footer/> 
      </Col> 
     </Row> 
     </Grid> 
    ); 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
    active: ownProps.history.isActive 
    }; 
}; 

export default connect(mapStateToProps)(App) 

Tôi đang sử dụng thành phần lưới flex phản ứng để bố cục.

Cho đến nay, công trình này cho tôi. Hy vọng rằng nó giúp bạn ra ngoài. Đừng quên cuộc gọi injectTapEventPlugin(), vì tôi có nó trong tệp index.js của mình. Tôi cũng nhập các tệp .css ở đó cho ứng dụng của mình.

Answer 2

ReactDOM.render(
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
    <Provider store={store}> 
    <div> 
     {devTools} 
     <Router history={history} routes={getRoutes(actions.logout)}/> 
    </div> 
    </Provider> 
    </MuiThemeProvider> 
, 
    document.getElementById('root') 
);