【React】Onsen UIのTabbarコンポーネントが動作しない時の対処法

本日ちょっとハマったのでご紹介。
Onsen UI の Tabbar コンポーネントを実装する際に、下記のようなエラーが発生し、タブの切り替えが正常に行えない現象が発生しました。

Uncaught TypeError: t._show is not a function
Uncaught (in promise) TypeError: r.pageElement._hide is not a function

公式ページのサンプルコードをそのまま転載しても動かず、エラーメッセージで検索してみても有効そうな記事がヒットせず、だったので、デバッグがかなり大変でした…。

で、対処方法ですが、Tabbar の renderTabs 関数内で定義している content 内に問題がありました。
下記のように、content で指定している要素を <Page> で囲むとエラーが解決できました！

<Tabbar onPreChange={({index}) => this.setState(index)}
  position='bottom'
  index={this.state.index}
  renderTabs={(activeIndex, tabbar) => [
    {
      content: <Page>Home</Page>,
      tab: <Tab label="Home" icon="md-home" />
    },
    {
      content: <Page>Settings</Page>,
      tab: <Tab label="Settings" icon="md-settings" />
    }]
  }
/>

行数でいうと、7 行目と 11 行目です。
私は、実際に表示したいコンポーネントを指定していたのですが、そのコンポーネントを同じように <Page> で囲むと、自前のページも問題なく表示できました。

エラーメッセージに pageElement とあったので、もしかして…という勘が働きましたが、気付かなければ数時間かかっていただろうなと思います。
早めに気付けて良かったですが…こんなの分からないよ！

以上、Onsen UI の Tabbar が正常に動作しない時の対処法でした。
ご参考になれば幸いです。