管理splitterSide使用它作爲可重用組件

Question

嗨，大家好，我想創建一個新的SideMenu組件基於OnsenUI splitterSide demo我嘗試這個，但我不知道我怎麼能管理我的狀態和道具。我是React.js中的新成員。有人可以幫助我改進（修復）嗎？

這是我現在的組件代碼：

import React, { PropTypes, Component } from 'react'; 
import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent} from 'react-onsenui'; 
import page1 from '../pages/page1.jsx'; 
import page2 from '../pages/page2.jsx'; 

class SideMenu extends Component { 
    constructor(props) { 
     super(props); 

     this.hide = this.hide.bind(this); 
     this.show = this.show.bind(this); 
     this.page1 = this.page1.bind(this); 
     this.page2 = this.page2.bind(this); 
    }; 

    hide() { 
     this.props.isOpen = false; 
    }; 

    show() { 
     this.props.isOpen = true; 
    }; 

    goto_page1() { 
     this.props.navigator.resetPage({ 
      component: page1, 
      key: 'Page1_Index' 
     }); 
    }; 

    goto_page2() { 
     this.props.navigator.resetPage({ 
      component: page2, 
      key: 'Page2_Index' 
     }); 
    }; 

    render() { 
     return (
      <Splitter> 
       <SplitterSide 
        style={{ 
       boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' 
      }} 
        side='left' 
        width={200} 
        collapse={true} 
        isSwipeable={true} 
        isOpen={this.props.isOpen} 
        onClose={this.hide} 
        onOpen={this.show} 
       > 
        <Page> 
         <List 
          dataSource={['page one', 'page two']} 
          renderRow={(title) => { 
          switch(title) { 
           case "page one": 
            return (
             <ListItem key={title} onClick={this.goto_page1} tappable> 
              <div>{title}</div> 
             </ListItem> 
             ); 
            break; 
           case "page two": 
            return (
             <ListItem key={title} onClick={this.goto_page2} tappable> 
              <div>{title}></div> 
             </ListItem> 
             ); 
            break; 
           default: 
            return (
             <ListItem key={title} onClick={this.hide} tappable> 
              <div>{title}</div> 
             </ListItem> 
             ); 
            break; 
          } 
         }} 
         /> 
        </Page> 
       </SplitterSide> 
       <SplitterContent> 
        {this.props.children} 
       </SplitterContent> 
      </Splitter> 

     ); 
    } 
} 

SideMenu.propTypes = { 
    navigator: PropTypes.object 
}; 

export default SideMenu; 

這是第1頁代碼：

import React, { PropTypes, Component } from 'react'; 
import { Page, Toolbar, ToolbarButton, Icon} from 'react-onsenui'; 
import SideMenu from '../components/SideMenu.jsx'; 


class page1 extends Component { 
    constructor(props) { 
     super(props); 

     this.renderToolbar = this.renderToolbar.bind(this); 
     this.hide = this.hide.bind(this); 
     this.show = this.show.bind(this); 

     this.state = { 
      isOpen: false 
     }; 
    }; 

    renderToolbar() { 
     return (
      <Toolbar> 
       <div className='left'> 
        <ToolbarButton onClick={this.show}> 
         <Icon icon='ion-navicon, material:md-menu' /> 
        </ToolbarButton> 
       </div> 
       <div className='center'>Page One Title</div> 
      </Toolbar> 
     ); 
    }; 

    hide() { 
     this.setState({isOpen: false}); 
    }; 

    show() { 
     this.setState({isOpen: true}); 
    }; 



    render() { 
     return (
     <SideMenu navigator={this.props.navigator} isOpen={this.state.isOpen}> 
      <Page renderToolbar={this.renderToolbar}> 
       Page content here 
      </Page> 
     </SideMenu> 

     ); 
    } 
} 

page1.propTypes = { 
    navigator: PropTypes.object 
}; 

export default page1; 

是我的代碼風格是正確的嗎？ （我的道具是國家有效嗎？）

如何防止show和hide函數的兩次申報？

---

新版本：

更改我的代碼，波紋管的任何想法或改善？

import { Meteor } from 'meteor/meteor'; 
import React, { PropTypes, Component } from 'react'; 
import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent, Toolbar, ToolbarButton, Modal} from 'react-onsenui'; 
import { Random } from 'meteor/random'; 
import page1 from '../pages/page1.jsx'; 
import page2 from '../pages/page2.jsx'; 

class SideMenu extends Component { 
    constructor(props) { 
     super(props); 

     this.renderToolbar = this.renderToolbar.bind(this); 
     this.hide = this.hide.bind(this); 
     this.show = this.show.bind(this); 
     this.goto_page1 = this.goto_page1.bind(this); 
     this.goto_page2 = this.goto_page2.bind(this); 

     this.state = { 
      isOpen: false 
     }; 
    }; 

    renderToolbar() { 
     return (
      <Toolbar> 
       <div className='left'> 
        <ToolbarButton onClick={this.show}> 
         <Icon icon='ion-navicon, material:md-menu' /> 
        </ToolbarButton> 
       </div> 
       <div className='center'>{this.props.pageTitle}</div> 
      </Toolbar> 
     ); 
    }; 

    hide() { 
     this.setState({isOpen: false}); 
    }; 

    show() { 
     this.setState({isOpen: true}); 
    }; 

    goto_page1() { 
     this.props.navigator.resetPage({ 
      component: page1, 
      key: 'Page1_Index' 
     }); 
    }; 

    goto_page2() { 
     this.props.navigator.resetPage({ 
      component: page2, 
      key: 'Page2_Index' 
     }); 
    }; 

    render() { 
     return (
      <Splitter> 
       <SplitterSide 
        style={{ 
       boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' 
      }} 
        side='left' 
        width={200} 
        collapse={true} 
        isSwipeable={true} 
        isOpen={this.state.isOpen} 
        onClose={this.hide} 
        onOpen={this.show} 
       > 
        <Page> 
         <List 
          dataSource={[ 'page one', 'page two']} 
          renderRow={(title) => { 
          switch(title) { 
           case "page one": 
            return (
             <ListItem key={title} onClick={this.goto_page1} tappable> 
              <div className='left'>{title}</div> 
             </ListItem> 
             ); 
            break; 
           case "page two": 
            return (
             <ListItem key={title} onClick={this.goto_page2} tappable> 
              <div className='left'>{title}</div> 
             </ListItem> 
             ); 
            break; 
           default: 
            return (
             <ListItem key={title} onClick={this.hide} tappable> 
              <div className='left'>{title}</div> 
             </ListItem> 
             ); 
            break; 
          } 
         }} 
         /> 
        </Page> 
       </SplitterSide> 
       <SplitterContent> 
        <Page renderToolbar={this.renderToolbar} > 
         {this.props.children} 
        </Page> 

       </SplitterContent> 
      </Splitter> 

     ); 
    } 
} 

SideMenu.propTypes = { 
    navigator: PropTypes.object.isRequired, 
    pageTitle: PropTypes.string.isRequired 
}; 

export default SideMenu; 

我也改變我的第1頁到：

import React, { PropTypes, Component } from 'react'; 
import { Icon, List, ListItem, ListHeader} from 'react-onsenui'; 
import SideMenu from '../components/SideMenu.jsx'; 


class page1 extends Component { 

    render() { 
     return (
     <SideMenu navigator={this.props.navigator} pageTitle="page 1 title"> 
       Page content here 
     </SideMenu> 

     ); 
    } 
} 

page1.propTypes = { 
    navigator: PropTypes.object 
}; 

export default page1; 

Answer 1

如何防止顯示和隱藏功能的兩個時間申報？

你可以用你的方法是這樣的：

<YourComponent method={() => this.hide() } 

然後你將不再需要在C-TOR的結合。

或服用一種名爲「autobind-裝飾」庫，每次上課之前添加@autobind：

@autobind 
class YourComponent extends React.Component {….}