2016-11-16 162 views
0

我尝试使用OnsenUI Splitter创建一个简单的SideMenu组件象下面这样:类型错误:enterPage在OnsenUI 2未定义阵营导航

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

我仔细检查了东西哪里是问题球员?

回答

1

Ons.Navigator只承认Ons.Page作为孩子。当您在page1中渲染它时,请尝试将您的SideMenu组件换成<Ons.Page> ... </Ons.Page>

+0

谢谢你。它的工作。 – b24