javascript - React - 注入的组件与父页面 DOM 不匹配
问题描述
我有一个用 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 作为一个单独的组件,称为 Header 组件,而不是这个 Navbar 块,它只是:
<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>
)
}
}
但是,当我这样做时,Header 组件没有与页面正确集成,并且它被放置在页面中间,就像页面中的陌生人一样。
我试图做的事情:
当我对 Header 组件进行相同的渲染,但没有 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。如果我不得不猜测, for <Page>
,<Navbar>
可能需要是直接孩子,否则将无法正确处理。
当您从函数返回导航栏时,不使用中间<Header>
标签,因此它再次是直接子标签(这是您的示例之间的区别)。
如果您参考文档:https ://framework7.io/docs/navbar.html#fixed-navbar-type
固定导航栏也是页面的一部分,但它始终在屏幕上可见,而不取决于页面滚动。在这种情况下,它必须是页面的直接子级,如果页面也有固定工具栏,那么它必须在工具栏之前:
我知道以上不适用于 react 版本,但我怀疑 react 也是如此。
推荐阅读
- flutter - 在 Flutter 中嵌入 Instagram 帖子
- functional-programming - Scheme中处理用户输入的程序的代码设计
- java - 有什么方法可以更轻松地做到这一点吗?
- python - 将登录用户的用户名保存在数据库中,而不是用户ID
- wso2 - 由于 WSO2IS 的登录页面上的会话超时,身份验证错误
- python - 多列处理
- javascript - 如何将 npm 包 selenium-standalone 与 Nightmare.js 一起使用,而不是下载 selenium jar?
- python - 在字典中阅读时“没有要从文件中解析的列”
- react-native - 在本机反应中检测2个手指滑动方向
- javascript - Javascript文件阅读器+变量范围内的问题