React - 注入的组件与父页面 DOM 不匹配答案

【问题标题】：React - injected component doesn't fit with the parent page DOM correctlyReact - 注入的组件与父页面 DOM 不匹配
【发布时间】：2019-08-07 21:15:55
【问题描述】：

我有一个使用 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 组件时却没有呢？

【问题讨论】：

您是否在提取的 react 组件中导入了正确的样式表？如果您已正确完成所有操作，这可能是样式问题
检查DOM结构是否有差异，也比较样式。

标签： javascript reactjs react-native components

【解决方案1】：

所以看起来您正在为您的应用程序使用 framework7。如果非要我猜的话，对于<Page>，<Navbar> 可能需要是直子，否则无法正确处理。

当你从一个函数返回导航栏时，中间的<Header>标签没有被使用，所以它又是一个直接的孩子（这是你的例子之间的区别）。

如果您参考文档：https://framework7.io/docs/navbar.html#fixed-navbar-type

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

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

【讨论】：

是的，它是 F7。这可能会发生很多（破坏直接继承） - 有什么方法可以告诉 React 在没有中间头的情况下渲染代码，而是直接放置孩子的渲染代码？所以<Header />标签实际上不会在代码中，只是在SRC代码中，但是编译后，只有它的内容会被拉到代码中。否则，正如我所说，它可能会与许多其他 CSS 规则发生冲突……与 F7 相关或不相关，不是吗？

【解决方案2】：

我终于找到答案了

我正在使用 Framework7，在 Framework7 中，作为 App 组件下的子组件的每个组件都会自动（通过 F7）进入“主内容”组件，这些组件是非固定元素。如果你想保留像 header 这样的固定元素，你应该：<Header slot="first">

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

您可以在此处阅读更多相关信息： https://framework7.io/react/page.html#page-slots

【讨论】：