React コンポーネント拡張

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

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');
  }

  // ...

};

テーマ

現在使用されているテーマ (iOS または MD) に関する情報を含むブール値プロパティを持つオブジェクトです。 `theme.ios`、`theme.md`。

import { theme } from 'framework7-react';

export default () => {

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

  // ...
}

`f7route` と `f7router`

ルーターインスタンスと現在のルートは、props 経由でルーターコンポーネントに渡されます。

このプロパティは、ルーターによってロードされたコンポーネント (例: ページ、ルーティング可能なモーダル、ルーティング可能なタブ) でのみ使用できます。「より深い」子コンポーネントでこのプロパティにアクセスする必要がある場合は、props を使用して渡す必要があります。

// will be received in 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/` パスと `/page/user/55/post/12/` のページ URL に一致するルートがある場合、オブジェクトは ` {userId: '55', postId: '12'}` になります。
• `name` - ルート名
• `hash` - ルート URL ハッシュ
• `route` - 使用可能なルートから一致するルートを持つオブジェクト

スロット

すべての Framework7-React コンポーネントは、`slots` を使用してコンポーネント構造全体に子を配布します。これらは、Web コンポーネントスロットおよび Vue.js スロットと非常によく似ています。

例えば

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 コンポーネントはイベントをサポートしており、実際には props であり、リスナーは `on$Event` prop として割り当てる必要があります。

たとえば、`<Page>` コンポーネントは `pageInit`、`pageBeforeIn`、およびその他の イベント をサポートしているため、このようなイベントを処理するには

export default () => {
  const onPageBeforeIn = () => {
    // do something on page before in
  }

  const onPageInit = () => {
    // do something on page init
  }

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