javascript - Materialisecss 的 SideNav 在 React Web App 中停止工作

Question

我有一个简单的 React 应用程序，带有 React-Router 和 MaterializeCSS 用于样式设置。

Materialize 的 SideNav 起初可以工作，但是当我切换页面时，例如从根 url 转到 url/login，它会停止工作，并且在单击菜单图标时添加一个哈希 - url/login#。它可能与react-router和browserHistory有关。

以下是该问题的相关代码:

firebase.auth().onAuthStateChanged((user) => {
 if(user){
  browserHistory.push('/');
 } else{
}
});

let loginRedirect = (nextState, replace, next) => {
 if(firebase.auth().currentUser){
  store.dispatch(actions.startLogout());
  replace('/');
 } else{
   next();
   }
};

ReactDOM.render(
 <Provider store={store}>
  <Router history={browserHistory}>
   <Route path="/" component={Layout}/>
   <Route path="/login" component={Login} onEnter={loginRedirect}/>
  </Router>
 </Provider>
,app);

$(document ).ready(function(){$('.button-collapse').sideNav({
  menuWidth: 200,
  edge: 'left',
  closeOnClick: true,
  draggable: true 
}
)});

Answer 1

jQuery 和 React 在这里干扰很大。您最好使用 react-material's Drawer component 。它是用 React 编写的，使其更容易实现和维护。以下是他们文档中的示例:

import React from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import RaisedButton from 'material-ui/RaisedButton';

export default class DrawerUndockedExample extends React.Component {

  constructor(props) {
    super(props);
    this.state = {open: false};
  }

  handleToggle = () => this.setState({open: !this.state.open});

  handleClose = () => this.setState({open: false});

  render() {
    return (
      <div>
        <RaisedButton
          label="Open Drawer"
          onTouchTap={this.handleToggle}
        />
        <Drawer
          docked={false}
          width={200}
          open={this.state.open}
          onRequestChange={(open) => this.setState({open})}
        >
          <MenuItem onTouchTap={this.handleClose}>Menu Item</MenuItem>
          <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
        </Drawer>
      </div>
    );
  }
}

我还建议切换到 Material-UI对于您想要构建的所有其他东西。