Materializecss 的 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 以获取您想要构建的所有其他内容。

Materializecss 的 SideNav 在 React Web App 中停止工作

SideNav from Materializecss stops working in React Web App

javascript

materialize

reactjs

react-router