javascript - 1 つのタブで状態が変更された後、温泉タブバーが正しく更新されない

Question

以下は、3 つのタブを持つ Tabbar の簡単な例です。2 つ目では、状態変数を使用して、レンダリング時に 2 つのコンポーネントを切り替えます。3 つのタブをブラウズすると、すべて問題ないように見えます。しかし、タブ番号 2 でコンポーネントを切り替えると (最初にフローティング ボタンをクリックし、次に [戻る] ボタンをクリックして)、タブバーが正しく機能しません。これを実行してページ 1 に戻ると、ページ 1 に移動するように見えますが、ページ 2 のコンテンツが表示されたままになります。切り替えてページ 3 に移動すると、正常に動作します。また、ページ 2 で切り替えを行うと、ページ 1 に移動してから、ページ間を少し前後にクリックすると、再び機能し始めます。

あるページからより高いインデックスのページに移動すると機能し始めるようです (そのため、ページ 3 に直接移動すると機能します)。

何か間違ったことをしていますか、それとも Onsen UI のバグですか?

サンプルコードは次のとおりです（Meteor、React、Onsen UIを使用しています）：

import React, { Component } from 'react';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
import ons from 'onsenui';
import {Page,Tabbar, Tab,Toolbar, Fab, BackButton, Icon} from 'react-onsenui';

export default class App extends Component {
  constructor() {
    super();
    this.state = {index: 0};
  }

  renderTabs() {
    return [
      {
        content: <Page1 key="t1"/>,
        tab: <Tab label='Page1' key="b1" />
      },
      {
        content: <Page2 key="t2"/>,
        tab: <Tab label='Page 2' key="b2" />
      },
      {
        content: <Page3 key="t3"/>,
        tab: <Tab label='Page 3' key="b3" />
      }
    ];
  }

  render() {
    return(
      <Tabbar
        index={this.state.index}
        onPreChange={(event) =>
          {
            if (event.index != this.state.index) {
              this.setState({index: event.index});
            }
          }
        }
        renderTabs={() => this.renderTabs()}
        />
    );
  }
}

class Page1 extends Component {
  render() {
    return (
      <Page>
        <div>Page 1</div>
      </Page>
    );
  }
}

class Page2 extends Component {
  constructor() {
    super();
    this.state = { showTest: false};
  }

  showTest(show) {
    this.setState({showTest: show});
  }

  render() {
    return (
      this.state.showTest ?
      <Show2 showTest={(show) =>this.showTest(show)} />
      :
      <Show1 showTest={(show) =>this.showTest(show)} />
    );
  }
}

class Show1 extends Component {
  renderToolbar() {
    return (
      <Toolbar>
        <div className='center'>Show 1</div>
      </Toolbar>
    );
  }
  renderFixed() {
    return(
      <Fab position="bottom right" onClick={() => this.props.showTest(true)}><Icon icon='md-plus'/></Fab>
    );
  }
  render() {
    return (
      <Page renderToolbar={this.renderToolbar} renderFixed={() => this.renderFixed()}>Show 1</Page>
    );
  }
}

class Show2 extends Component {
  renderToolbar() {
    return (
      <Toolbar>
        <div className='left'><BackButton onClick={() => this.props.showTest(false)}>Back</BackButton></div>
        <div className='center'>Show 2</div>
      </Toolbar>
    );
  }
  render() {
    return (
      <Page renderToolbar={() => this.renderToolbar()}>Show 2</Page>
    );
  }
}

class Page3 extends Component {
  render() {
    return (
      <Page>
        <div>Page 3</div>
      </Page>
    );
  }
}