Reactコンポーネントの拡張機能

ReactがアプリをマウントしてFramework7を初期化すると、Framework7の初期化されたインスタンスや、framework7-reactパッケージからインポートできるいくつかの便利なプロパティにアクセスできるようになります。

f7ready

これは、Framework7が完全に初期化されたときに実行されるコールバック関数です。コンポーネントの中で、Framework7のAPIにアクセスする必要があり、準備ができていることを確認するのに便利です。このコールバック関数には、Framework7に関連するすべてのロジックを入れても問題ありません。引数として、初期化されたFramework7のインスタンスを受け取ります。例えば、以下のようになります。

import React, { useEffect } from 'react';
import { f7ready } from 'framework7-react';

export default () => {

  useEffect(() => {
    f7ready((f7) => {
      f7.dialog.alert('Component mounted');
    })
  }, []);

  // ...

}

f7

Framework7の初期化されたメインのインスタンスです。これにより、Framework7の任意のAPIを使用することができます。

もし、Framework7のインスタンスにアクセスしたときに、すでに初期化されていることが確認できれば、それを直接インポートして使用することができます。

import { f7 } from 'framework7-react';

export default () => {

  const doSomething = () => {
    f7.dialog.alert('Hello world');
  }

  // ...

};

theme（テーマ

これは、現在使用されているテーマ（iOS、MD、Aurora）に関する情報を持つ、ブール値のプロパティを持つオブジェクトです： theme.ios, theme.md, theme.aurora.

import { theme } from 'framework7-react';

export default () => {

  if (theme.ios) {
    console.log('Currently active theme is iOS-theme')
  }

  // ...
}

f7route と f7router です。

ルーターのインスタンスと現在のルートは、プロップを介してルーターコンポーネントに渡されます。

このプロパティは、ルーターで読み込まれるコンポーネント（ページ、ルーティング可能なモーダル、ルーティング可能なタブなど）でのみ利用できます。より深い」子コンポーネントでこのプロパティにアクセスする必要がある場合は、props を使用してそれを渡す必要があります。

// はpropsで受け取られます。
export default ({ f7route, f7router }) => {
  useEffect(() => {
    console.log(f7route.url)
  }, []);
  const navigate = () => {
    f7router.navigate('/some-page/');
  }
  // ...
}

f7route は現在のルートで、次のようなプロパティを持つオブジェクトです。

• url - ルートの URL
• path - ルートのパス
• query - ルートのクエリを持つオブジェクトです。もしURLが /page/?id=5&foo=bar であれば、次のようなオブジェクトが含まれます {id: '5', foo: 'bar'} 。
• params - ルートのパラメータです。もし、/page/user/:userId/post/:postId/というパスでマッチングしたルートがあり、ページのURLが/page/user/55/post/12/であれば、以下のようなオブジェクトになります {userId: '55', postId: '12'}
• name - ルート名
• hash - ルートのURLハッシュ
• route - 利用可能なルートからマッチするルートを持つオブジェクト

スロット

すべてのFramework7-Reactコンポーネントは、コンポーネントの構造上、子プロセスを分配するために スロット を使用します。これは Web Component Slots や Vue.js Slots とよく似た動作をします。

以下はその例です。

export default () => (
  <Page>
    <p slot="fixed">I'm fixed page element</p>
    <p>I'm in scrollable page area</p>
    <List>
      <ListItem>
        <img slot="media" src="path/to/image.png" />
        <span slot="title">Title 1</span>
        <span slot="title">Title 2</span>
      </ListItem>
    </List>
  </Page>
)

にレンダリングします。

<div class="page">
  <p slot="fixed">I'm fixed page element</p>
  <div class="page-content">
    <p>I'm in scrollable page area</p>
    <div class="list">
      <ul>
        <li>
          <div class="item-content">
            <div class="item-media">
              <img slot="media" src="path/to/image.png" />
            </div>
            <div class="item-inner">
              <div class="item-title">
                <span slot="title">Title 1</span>
                <span slot="title">Title 2</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

イベント

すべてのFramework7-Reactコンポーネントはイベントをサポートしています。イベントは実際にはプロップであり、そのリスナーは on$Event というプロップとして割り当てられなければなりません。

例えば <Page> コンポーネントは pageInit や pageBeforeIn などの イベント をサポートしているので、これらのイベントを扱うためには

export default () => {
  const onPageBeforeIn = () => {
    // ページビフォアインで何かをする
  }

  const onPageInit = () => {
    // ページの init で何かをする
  }

  return (
    <Page onPageBeforeIn={onPageBeforeIn} onPageInit={onPageInit}>
      ...
    </Page>
  )
}