Javascript 反应注入组件与父页面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>

它起作用了。但就像这样：

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.js组件渲染时，它不会呢？

因此，看起来您的应用程序正在使用framework7。如果让我猜的话，比如说，可能需要是一个直接的孩子，否则它就不会被正确处理

当您从函数返回导航栏时，不会使用中间标记，因此它也是一个直接子项。这就是示例之间的区别

如果您参考文档：

固定导航栏也是页面的一部分，但它始终在屏幕上可见，而不取决于页面滚动。在这种情况下，它必须是页面的直接子级，如果页面还具有固定工具栏，则它必须位于工具栏之前：

我知道上述内容不适用于react版本，但我怀疑react也是如此。

我终于找到了答案

我使用的是Framework7，在Framework7中，作为应用程序组件下的子组件的每个组件都会通过F7自动获取主内容组件，这些组件是不固定的元素。如果要保留固定元素（如标题），应：

React不会接触或干扰任何渲染，这是由F7完成的

您可以在此处阅读更多关于此的信息：

---

您是否在提取的react组件中导入了正确的样式表？如果你做的一切都正确的话，这可能是一个样式问题。检查DOM结构是否有差异，也比较样式。是的，它是F7。这可能会在直接继承中发生很多事情-是否有任何方法可以告诉React在不使用中间头的情况下呈现代码，而是直接放置子级的呈现代码？所以标记实际上不会在代码中，只是在SRC代码中，但是在编译之后，只有它的内容会被拉到代码中。否则，正如我所说，它可能会与许多其他CSS规则发生冲突。。。是否与F7相关？

{Header()}

<Header />