2016-05-09 12 views
0

Ich habe viel Mühe, material-ui 's AppBar mit Linksbalken zu implementieren, da es scheint viele verschiedene Variationen über Komponentendeklaration/importierte Abhängigkeiten Syntax und Komponenten. Ich kann nicht einmal die richtige Dokumentation über http://www.material-ui.com/ über Leftnav in erster Linie finden, alles, was sie geben mit Appbar ist ein statisches Hamburger Menü Beispiel. Mein Code ist wie folgt:Kann Linknav mit AppBar-Komponente in Material-Ui nicht implementieren

import React, { Component } from 'react' 
import { LeftNav, AppBar} from 'material-ui' 
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme' 
import getMuiTheme from 'material-ui/styles/getMuiTheme' 
import { Router, Route, Navigation, Link, browserHistory } from 'react-router' 


export default class Header extends Component { 


    getChildContext() { 
    return {muiTheme: getMuiTheme(baseTheme)}; 
    } 

    _toggleNav(){ 
     this.refs.leftNav.toggle(); 
    } 

     render() { 
      const data = this.props.data 
      const nav_items = data.globals.nav_items 
      //Menu item links 
      const menu_items = nav_items.map((nav_item) => { 
      return (
       <span key={ 'key-' + nav_item.value }> 
       <Link to={ '/' + nav_item.value }>{ nav_item.title }</Link> 
       </span> 
      ) 
      }) 
      return (
       <div> 
       <LeftNav ref='leftNav' 
       docked={false} 
       menuItems={ menu_items } /> 

       <AppBar title="App Bar Example" onLeftIconButtonTouchTap={this._toggleNav} 
      isInitiallyOpen={true} /> 
       </div> 
      ) 
     } 
    } 

    Header.childContextTypes = { 
    muiTheme: React.PropTypes.object.isRequired, 
}; 

Ich erhalte Fehler zu verschleiern, die mir nichts zu erklären, was eigentlich tue falsch:

VM15235:27 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Header 

und:

invariant.js:38 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `Header`.(…) 

Gibt es eine Möglichkeit um das deutlicher zu machen?

Antwort

0

Es wurde eine Änderung an material-ui vorgenommen, die LeftNav in Drawer umbenannte! Es scheint, dass bestimmte Dokumente/Beispiele nicht aktualisiert wurden. Also, wenn Sie Schublade verwenden, finden Sie Dokumentation und es sollte funktionieren! Hier ist der Commit/Thread von der Änderung weg von LeftNav.

https://github.com/callemall/material-ui/issues/2697

+0

Danke, dass Sie mir das sagen. Ich habe einen neuen Thread erstellt: http://stackoverflow.com/questions/37120713/material-ui-drawer-with-appbar-not-working-with-component-syntax, um Verwirrung zu vermeiden, da ich immer noch Probleme bei der Umsetzung habe . – HGB

Verwandte Themen