Question

我想用React和MaterialUI创建一个Electron应用程序。

界面看起来很漂亮，但是当我点击抽屉按钮时没有任何反应。实现路由，但每当我尝试在MenuItem内部或周围插入时，它就会抛出

警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。请检查MenuBar的呈现方法。

这是我的代码：

＆＃13;

// App.js

import './assets/css/App.css';
import React, { Component } from 'react';
import { render } from 'react-dom';
import MenuBar from './components/MenuBar';

import { BrowserRouter as Router, Route, Link} from 'react-router-dom';

import About from "./screens/About";
import SomePage from "./screens/SomePage";

class App extends Component {
  render() {
    return (
      <Router>
        <div>
            <MenuBar></MenuBar>
        <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/somepage">Topics</Link></li>
        </ul>

        <hr/>

        <Route exact path="/"/>
        <Route path="/about" component={About}/>
        <Route path="/somepage" component={SomePage}/>
        </div>
    </Router>
    );
  }
}

export default App;

＆＃13;

// MenuBar.js

// @flow weak

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Divider from 'material-ui/Divider';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import Menu, { MenuItem } from 'material-ui/Menu';

import MenuDots from './MenuDots';

// Routing
import { Link } from 'react-router'

// Icons
import InboxIcon from 'material-ui-icons/Inbox';
import DraftsIcon from 'material-ui-icons/Drafts';
import StarIcon from 'material-ui-icons/Star';
import SendIcon from 'material-ui-icons/Send';
import MailIcon from 'material-ui-icons/Mail';
import DeleteIcon from 'material-ui-icons/Delete';
import ReportIcon from 'material-ui-icons/Report';

const styleSheet = createStyleSheet({
  root: {
    width: '100%',
  },
  flex: {
    flex: 1,
  },
  list: {
    width: 250,
    flex: 'initial',
  },
  listFull: {
    width: 'auto',
    flex: 'initial',
  }
});

class MenuBar extends Component {
  constructor() {
    super();
    this.state = {
      open: false
    }
  }

  //Toggle function (open/close Drawer)
  toggleDrawer(_state) {
    if (_state === true || _state === false) {
      this.setState({
        open: _state
      })
    } else {
      this.setState({
        open: !this.state.open
      })
    }
  }

  handleLeftOpen = () => this.toggleDrawer(true);
  handleLeftClose = () => this.toggleDrawer(false);

  render() {
    const classes = this.props.classes;

    const mailFolderListItems = (
      <div>
        <ListItem button>
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <Link to="/somepage"><ListItemText primary="test" /></Link>
        </ListItem>
        <ListItem button>
          <ListItemIcon>
            <StarIcon />
          </ListItemIcon>
          <ListItemText primary="Starred" />
        </ListItem>
        <ListItem button>
          <ListItemIcon>
            <SendIcon />
          </ListItemIcon>
          <ListItemText primary="Send mail" />
        </ListItem>
        <ListItem button>
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="Drafts" />
        </ListItem>
      </div>
    );

    const otherMailFolderListItems = (
      <div>
        <ListItem button>
          <ListItemIcon>
            <MailIcon />
          </ListItemIcon>
          <ListItemText primary="All mail" />
        </ListItem>
        <ListItem button>
          <ListItemIcon>
            <DeleteIcon />
          </ListItemIcon>
          <ListItemText primary="Trash" />
        </ListItem>
        <ListItem button>
          <ListItemIcon>
            <ReportIcon />
          </ListItemIcon>
          <ListItemText primary="Spam" />
        </ListItem>
      </div>
    );

    const sideList = (
      <div>
        <List className={classes.list} disablePadding>
          {mailFolderListItems}
        </List>
        <Divider />
        <List className={classes.list} disablePadding>
          {otherMailFolderListItems}
        </List>
      </div>
    );


    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar style={{ paddingLeft: "8px", paddingRight: "8px" }}>
            <IconButton color="contrast" aria-label="Menu" onClick={this.toggleDrawer.bind(this)}>
              <MenuIcon />
            </IconButton>
            <Typography type="title" color="inherit" className={classes.flex}>
              Some Software
          </Typography>
            <Button color="contrast">Login</Button>
            <MenuDots></MenuDots>
          </Toolbar>
        </AppBar>
        <Drawer
          open={this.state.open}
          onRequestClose={this.handleLeftClose}
          onClick={this.handleLeftClose}
        >
          {sideList}
        </Drawer>
      </div>
    );
  }
}

MenuBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styleSheet)(MenuBar);

＆＃13;

Answer 1

好的，所以我改变了以实现以下目标：

路由
以前的样式（没有路由）

首先，我必须从

更改我的导入

import { Link } from 'react-router'

到

import { NavLink } from 'react-router-dom';

这样可以提供更好的造型和更多选择。这是它归结为的代码：

<NavLink to="/about" style={{ textDecoration: 'none', color: 'unset' }} >
  <ListItem button>
    <ListItemText primary="Test"/>
  </ListItem>
</NavLink >

textDecoration和color是删除链接下划线所必需的（因为NavLink正常渲染）并规范化涟漪效应。

Answer 2

您正在使用反应router v4，而不是从菜单组件中的Link导入react-router，而是从react-router-dom导入它。

像这样：

import { Link } from 'react-router-dom';

检查 DOC 。

Answer 3

如果您想使用 Material UI 样式和 React 路由器功能，您可以使用：

import { Link as UiLink } from '@material-ui/core';
import { Link } from 'react-router-dom';

//...
<UiLink component={Link} to="/path">Link text</UiLink>
//...

Answer 4

你可以这样做

<Typography className={aCustomClass}>
 <Link to='/path'>Your text</Link>
<Typography>

<link />无法与MaterialUI一起使用

4 个答案: