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）的資訊：theme.ios、theme.md。

import { theme } from 'framework7-react';

export default () => {

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

  // ...
}

f7route 和 f7router

路由器執行個體和目前路由會透過道具傳遞給路由器元件

這些屬性僅適用於使用路由器載入的元件（例如頁面、可路由模式對話方塊、可路由標籤）。如果您需要在「更深層」的子元件中存取此屬性，則需要使用道具將其傳遞下去。

// 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/ 路徑相符的路由，而頁面的 URL 是 /page/user/55/post/12/，則它將是以下物件 {userId: '55', postId: '12'}
• name - 路由名稱
• hash - 路由 URL hash
• route - 包含可用路由中相符路由的物件

插槽

所有 Framework7-React 元件都使用 插槽 來在元件結構中分配子元件。它們的工作方式與 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 元件都支援事件，它們實際上是道具，並且它們的監聽器必須指定為 on$Event 道具。

例如，<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>
  )
}