带抽屉的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