React 组件扩展

AfterReact挂载应用并初始化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组件使用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组件都支持事件，这些事件实际上是属性，并且它们的监听器必须作为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>
  )
}