Question

我尝试使用OnsenUI SideMenu创建一个简单的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组件包裹起来。

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

1 个答案: