我有一个由react.js构建的页面组件。该页面具有标题,内容和顶部工具栏。
这是组件页面的渲染:
<Page noSwipeback>
<Navbar sliding={false}>
<NavLeft>
<Link iconIos="f7:menu" iconMd="material:menu" panelOpen="right" />
</NavLeft>
<NavTitle sliding>{self.state.title}</NavTitle>
</Navbar>
<Toolbar tabbar bottom>
<Link tabLink="#suggestions" tabLinkActive>{RootScope.t['Suggestions']}</Link>
<Link tabLink="#soon">{RootScope.t['Soon']}</Link>
<Link tabLink="#history">{RootScope.t['History']}</Link>
</Toolbar>
<Tabs animated>
<Tab id="suggestions" tabActive>
<ListOrders />
</Tab>
<Tab id="soon">
<Block>
Upcoming orders
</Block>
</Tab>
<Tab id="history">
<Block>
<p>Tab 2 content</p>
</Block>
</Tab>
</Tabs>
</Page>
您可以看到,Navbar组件负责页面的标题。现在,我想将此纳维托作为一个单独的组件,称为标头组件,因此,而不是此Navbar Block,它仅是:
<Header title="page's title" />
并且在标题组件中应该是这样的:
import React from 'react';
import { Navbar, NavLeft, NavTitle, Link } from 'framework7-react';
export default class extends React.Component {
render() {
return (
<Navbar sliding={false}>
<NavLeft>
<Link iconIos="f7:menu" iconMd="material:menu"
panelOpen="right" />
</NavLeft>
<NavTitle sliding>{this.props.title}</NavTitle>
</Navbar>
)
}
}
但是,当我这样做时,标题组件并未与页面完整地集成到页面中间,就像页面中的陌生人一样。
我尝试做的事情:
当我执行相同的标头组件渲染时,但是没有React的组件,但是使用功能性渲染,它起作用 - 该组件位于正确的位置。
。例如:
// Header component:
export default function(self) {
return (
<Navbar sliding={false}>
<NavLeft>
<Link iconIos="f7:menu" iconMd="material:menu" panelOpen="right" />
</NavLeft>
<NavTitle sliding>{self.state.title}</NavTitle>
</Navbar>
)
}
// main page:
render() {
<div>
{Header(self)}
... rest of the code
</div>
}
所以,这样:
{Header()}
它有效。但是这样:
<Header />
不是。
那么,为什么当使用函数渲染时,它将与父组件正确放置,以及当它作为react.js组件呈现时,它不呢?
,因此看起来您正在将Framework7用于应用程序。如果我不得不猜测<Page>
,<Navbar>
可能需要是一个直接的孩子,否则它将无法正确处理。
当您从函数返回Navbar时,不使用中间<Header>
标签,因此它再次是直接的孩子(这是您的示例之间的区别)。
如果您参考文档:https://framework7.io/docs/navbar.html#fixed-navbar-type
固定的Navbar也是该页面的一部分,但在屏幕上始终可见,不取决于页面滚动。在这种情况下,它必须是页面的直接孩子,如果页面还固定了工具栏,则必须在工具栏之前:
我知道以上不适合React版本,但我怀疑React的情况是如此。
我终于找到了答案
我正在使用framework7和framework7中,每个是应用程序组件下的子组件的每个组件都在自动(通过F7)到"主体内部"组件,该组件是未固定元素的。如果要保留像标头这样的固定元素,则应:<Header slot="first">
React不会"触摸"或干扰任何渲染,这是由F7完成的。
您可以在此处阅读有关此信息的更多信息:https://framework7.io/react/page.html#page-slots