TypeError: enterPage не определено в OnsenUI 2 Реагировать навигатор

Question

Я пытаюсь создать простой SideMenu компонент с OnsenUI Splitter, как показано ниже:

import React, { PropTypes, Component } from 'react'; 
import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent, Toolbar, ToolbarButton, Modal} from 'react-onsenui'; 
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; 

И использовать его, как показано ниже:

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; 

Но к сожалению, это ошибка ниже ошибки при изменении страницы с SideMenu:

TypeError: enterPage is undefined

Я также создать интернет-CodePen для него, вы можете увидеть его здесь:

https://codepen.io/anon/pen/ObRzLB?editors=0011

Я проверил ничего, где это вопрос, ребята?

Answer 1

Ons.Navigator только принимает Ons.Page как дети. Попробуйте обернуть ваш SideMenu компонентом с помощью <Ons.Page> ... </Ons.Page>, если вы сделаете его в page1.