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

我有一個簡單的React應用程序，包括React-Router和MaterializeCSS用於樣式。Materializecss的SideNav在React Web App中停止工作

從物化的SideNav起初工作，但當我切換頁面，例如從根網址到網址/登錄時，它停止工作，只是當點擊菜單圖標時添加哈希 - 網址/登錄＃。它可能與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 
} 
)});

來源

2016-11-10 Ivo

我在項目中使用了materialize-css和React，並且經常遇到衝突，所以我不會再使用該組合。正如Fabian所說，我還建議試着讓材料 - 用戶組件爲你工作。它們看起來不錯，但是用React寫成。 – Katpas

jQuery和反應都嚴重干擾這裏。你可能最好使用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所有你想建立其他的東西。

來源

2016-11-10 22:25:19

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

回答

相關問題