Reagieren, Redux, Reagieren-Router – Stecken bei der Installation von material-ui

Tutorial:

Reagieren, Redux, Reagieren-Router - Stecken bei der Installation von material-ui

Aber da bin ich mit redux und reagieren router kann ich nicht wirklich sagen, MuiThemeProvider an die Spitze der Kette. Was ist der beste Weg, um diese Bibliothek?

Dass ist mein ReactDOM.render-Funktion:

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

… Und das ist der 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>
);
InformationsquelleAutor Grego | 2016-05-23

 

2 Replies
  1. 3

    Ich habe es getan, wie also. Ich habe eine index.js das ist bezeichnet durch mein Paket.json als Haupt-Datei zu starten (mit npm start). Ich habe (entfernt einige Importe und solche aus Platzgründen):

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

    Das hängt davon ab, auf eine andere Datei, Wurzel, gefunden in meinem container/Root.jsx-Datei:

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

    Weiter oben ist die App, die enthält meine ersten layout für meine Anwendung (in meinem Container/App.jsx-Datei):

    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)

    Ich bin mit dem reagieren flex-grid-Komponente für das layout.

    So weit das funktioniert für mich. Hoffentlich hilft es Euch. Nicht zu vergessen die injectTapEventPlugin () – Aufruf, wie ich es in meinem index.js Datei. Ich habe auch importieren .css-Dateien für meine app.

    • In der Zwischenzeit habe ich es gelöst, eigentlich sehr ähnlich wie du. Als ich anfing, die Frage, die ich verwendet, Stift zu und gab den Fehler zu beheben. So landete ich entfernen.
    • haben Sie zufällig eine original-Liste von Importen? Ich will sehen, etwas zu tun ähnlich wie diese, aber ich bin mir nicht sicher, wie Sie Sie auf line-up meine Importe mit Ihnen. Danke.
  2. 1
    ReactDOM.render(
      <MuiThemeProvider muiTheme={getMuiTheme()}>
       <Provider store={store}>
        <div>
          {devTools}
          <Router history={history} routes={getRoutes(actions.logout)}/>
        </div>
       </Provider>
      </MuiThemeProvider>
    ,
      document.getElementById('root')
    );    
    • Ja, ich habe tatsächlich versucht, diese vor. Es stellt sich heraus, dass der stylus nicht wirklich mit Ihr anfreunden.
    • Es ist ein Stift Hafen von es auch das original verwendet, weniger,-. Also werde ich einfach die verwenden. Dank

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.