TypeError：EnterPage在OnsenUI 2 React导航器中未定义

Question

I'm try to create a simple SideMenu component with OnsenUI Splitter like below:

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;

And use it as below:

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;

But unfortunately it's return below error when change page from SideMenu:

TypeError: enterPage is undefined

I also create an online CodePen for it, you can see it here:

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

I double checked anything where is the issue guys?

Answer 1

Ons.Navigator only admits Ons.Page as children. Try to wrap your SideMenu component with <Ons.Page> ... </Ons.Page> when you render it in page1 .