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 哈希
• 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>
  )
}