React Material-UIタブとドロワー

Question

ReactとMaterial-UIを使用して開いているタブ内にドロワーを開く際に問題が発生しました。私は引き出しを開くことができますが、それは最初のタブに表示されます。最初は、コンポーネントを構築する方法には何か問題があると思ったので、WebpackBinで非常に単純なものを作ったのと同じことをします。

これまで誰でもこれを把握できましたか？タブビューア内で引き出しを開くにはどうすればよいですか？私はダイアログでうまくやれるがタブではできない。ここで

は、サンプルコード

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です。 2番目のタブに移動します。ボタンをクリックします。最初のタブに戻り、そこで開いた引き出しが表示されます。

ありがとうございました。

Answer 1

これはハック方法であることが、

が良い可能性だ<Drawer>

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

作業Webpack Bin