Question

我想在Navigator内部Tab导致错误。下面给出了一个重现错误的完整代码片段。在代码段中，我们有两个标签。导航器位于第一个选项卡内。我们甚至不需要向导航器添加多个页面 - 即使在导航器仅显示initialRoute（即第一页）的简单设置中也会出现问题。

Codepen

import React from 'react';
import {render} from 'react-dom';

import ons from 'onsenui';
import * as Ons from 'react-onsenui';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

class FirstTab extends React.Component {
    render() {
        return (
            <Ons.Page>
                <h1>First Tab</h1>
            </Ons.Page>
        );
    }
}

class Navigator extends React.Component {
    renderPage(route, navigator) {
        return <FirstTab key={0}/>
    }
    render() {
        return (
            <Ons.Navigator
                initialRoute={{ 'name': 'firstTab' }}
                renderPage={this.renderPage.bind(this)}
            />
        );
    }
}

class SecondPage extends React.Component {
    render() {
        return (
            <Ons.Page>
                <h1>Second Tab</h1>
            </Ons.Page>
        );
    }
}

class Tabs extends React.Component {
    constructor(props){
        super(props);
        this.state = {index: 0};
    }
    renderTabs() {
        return [
            { tab: <Ons.Tab label='First Tab' key={0} />, content: <Navigator key={0}/>},
            { tab: <Ons.Tab label='Second Tab' key={1} />,content: <SecondPage key={1} />}
        ];
    }
    render() {
        return (
            <Ons.Tabbar
                position='auto'
                index={this.state.index}
                onPreChange={(event) => {
                    if (event.index != this.state.index) {
                        this.setState({index: event.index});
                    }
                }}
                renderTabs={this.renderTabs.bind(this)}
            />
        );
    }
}

// on startup
render(<Tabs />, document.getElementById('render-target'));

这里的问题是，一旦我们选择包含导航器的选项卡（在本例中为默认选项卡），我们就不能再切换选项卡了。任何单击选项卡都会导致错误

Uncaught Error: Invalid state: page element must be a "ons-page" element.

使用户被困在该标签内。有什么建议吗？

在onsen-react中没有导航器内部的导航器

0 个答案: