javascript - React - 注入(inject)的组件与父页面 DOM 不正确匹配

Question

我有一个使用 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>

如您所见，导航栏组件负责页面标题。 现在，我想将此导航栏作为一个单独的组件，称为标题组件，因此它不是此导航栏 block ，而是:

<Header title="page's title" />

在 header 组件中应该是这样的:

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 组件进行相同的渲染，但没有 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 组件渲染时却不能呢？

Answer 1

看来您正在为您的应用程序使用framework7。如果我必须猜测的话，对于 <Page> , <Navbar>可能需要是直接子级，否则将无法正确处理。

当您从函数返回导航栏时，中间 <Header>未使用标记，因此它又是直接子级(这是示例之间的区别)。

<小时/>

如果您引用文档:https://framework7.io/docs/navbar.html#fixed-navbar-type

Fixed navbar is also part of the page but it is always visible on screen not depending on page scroll. In this case it must be a direct child of page and if page has also fixed toolbar then it must be BEFORE the toolbar:

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