帶抽屜的React Material-UI選項卡

Question

我在使用React和Material-UI打開的選項卡內打開抽屜時遇到問題。我可以打開抽屜，但它顯示在第一個標籤中。起初我認爲這是我構建組件的方式出了問題，所以我在WebpackBin中做了一個非常簡單的工具，它也做了同樣的事情。

有沒有人能夠解決這個問題呢？如何讓抽屜在標籤查看器內部打開？我可以用對話框做到這一點，但不能使用Tabs。

這裏是一個示例代碼

class sidebarDrawer extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     }; 
    } 

    render() { 
     return (
      <div>     
       <p>My sidebar content</p> 
      </div> 
     ); 
    } 
} 

class TabComponent extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      slideIndex: 0, 
      open: false, 
     }; 
    } 

    handleChange = (value) => { 
     this.setState({ 
      slideIndex: value, 
     }); 
    }; 

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

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

    render() { 
     let materialUITheme; 
     return (
      <MuiThemeProvider muiTheme={getMuiTheme()}> 
       <div> 
        <Tabs 
         onChange={this.handleChange} 
         value={this.state.slideIndex}> 
         <Tab label="Tab One" value={0} /> 
         <Tab label="Tab Two" value={1} /> 
        </Tabs> 
        <SwipeableViews 
         index={this.state.slideIndex} 
         onChangeIndex={this.handleChange}> 
         <div> 
          <h2 style={styles.headline}>Tabs with slide effect</h2> 
          Swipe to see the next slide.<br /> 
         </div> 
         <div style={styles.slide}> 
          <div> 
           <RaisedButton 
            label="Open Drawer" 
            onClick={this.handleToggle} 
           /> 
           <Drawer 
            docked={false} 
            width={200} 
            open={this.state.open} 
            onRequestChange={(open) => this.setState({open})} 
           > 
            <AppBar 
             title="Playlists" 
             onRightIconButtonTouchTap={this.handleClose} 
             showMenuIconButton={false}/> 
            <sidebarDrawer /> 
           </Drawer> 
          </div> 
         </div> 
        </SwipeableViews> 
       </div> 
      </MuiThemeProvider> 
     ); 
    } 
} 

這裏是WebpackBin你一起玩。轉到第二個標籤。點擊按鈕。回到第一個標籤，你會看到抽屜在那裏打開。

在此先感謝球員。

Answer 1

這可能是hackish的方式，但工程

添加樣式position: 'relative'到標籤的<Drawer>

containerStyle={{ position: 'absolute' }} // default is 'fixed' 
overlayStyle={{ position: 'absolute' }} 

工作Webpack Bin