无法在 material-ui 中使用 AppBar 组件实现 Leftnav

IT技术 reactjs react-router appbar
2021-05-26 08:14:40

我在尝试material-ui使用 Leftbar实现's AppBar时遇到了很多麻烦,因为组件声明/导入的依赖项语法和组件似乎有很多不同的变化。我什至无法首先http://www.material-ui.com/找到关于 Leftnav 的正确文档,他们提供的Appbar只是一个静态的汉堡菜单示例。我的代码如下:

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

我开始掩盖错误,这些错误无法解释我实际上做错了什么:

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

和:

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`.(…)

有没有办法使这更明确?

1个回答

material-ui将 LeftNav 重命名为 Drawer 后发生了变化似乎某些文档/示例尚未更新。因此,如果您使用 Drawer,您会找到文档并且它应该可以工作!这是从 LeftNav 更改而来的提交/线程。

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