управлять 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; 

И это Page1 код:

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; 

Я также изменить Page1 к:

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() } 

И тогда вам не нужно будет связывание в с-тор.

Или использовать библиотеку под названием «autobind-декоратор» и добавить @autobind перед каждым классом:.

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