Question

我对问题的解释/解释很长，所以我将问题同时张贴在顶部和底部：

react-bootstrap导航栏中内置点符号时，如何使用带有pug语法的react-bootstrap？

================================================ =====================

我正在跟踪视频教程，以学习如何使用React Bootstrap。但是，与本教程不同，我使用的是pug-as-jsx-loader，以便可以使用pug语法编写react组件。一切正常，直到我们到达导航栏部分。

代码如下：

return (
  <Navbar default collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <Link to='/'> Teeessst </Link>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav pullRight>
        <NavItem eventKey={1} componentClass={Link} href='/' to='/'>
            Home
        </NavItem>
        <NavItem eventKey={2} componentClass={Link} href='/about' to='/about'>
            About
        </NavItem>
        <NavItem eventKey={3} componentClass={Link} href='/news' to='/news'>
            News
        </NavItem>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
)

如果我能够使用pug语法，则代码如下所示：

return pug`
  Navbar(default, collapseOnSelect)
    Navbar.Header
      Navbar.Brand
        Link(to='/') Ayyy
      Navbar.Toggle
    Navbar.Collapse
      Nav(pullright)
        NavItem(eventKey='{1}' componentClass='{Link}' to='/') Home
        NavItem(eventKey='{2}' componentClass='{Link}' to='/about') About
        NavItem(eventKey='{3}' componentClass='{Link}' to='/news') News
`

现在，最下面的示例仍在页面上显示导航栏，但在某种意义上说“按钮”不在正确的位置，并且在单击按钮时没有执行任何操作，因此它已被“破坏”。上面的示例确实可以，但是我希望能够使用下面的示例。

我相信问题是因为pug语法中的点表示类名。因此，对于Navbar.Header，哈巴狗认为应该是Navbar class ='Header'

我认为我可以尝试通过更改react-bootstrap中的某些源代码来解决此问题。我发现引导代码中的Navbar.js文件底部有以下代码段：

UncontrollableNavbar.Brand = NavbarBrand;
UncontrollableNavbar.Header = NavbarHeader;
UncontrollableNavbar.Toggle = NavbarToggle;
UncontrollableNavbar.Collapse = NavbarCollapse;

export default bsStyles([Style.DEFAULT, Style.INVERSE], Style.DEFAULT,UncontrollableNavbar);

所以在我看来，它正在导出一个名为UncontrollableNavbar的对象，该对象具有仅来自其他文件的属性。我在目录中查找了所有文件，因此我想可以从中更改代码：

import {Navbar, Nav, NavItem} from 'react-bootstrap'
// skip some lines
<Navbar.Header>
// skip some lines

对此：

import {Navbar, Nav, NavItem, NavbarHeader} from 'react-bootstrap'
// skip some lines
<NavbarHeader>
// skip some lines

Webpack和babel可以很好地加载此文件，但是该页面不显示任何内容，因为Chrome控制台中存在此错误：元素类型无效：预期使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。

我假设此错误与导航栏的状态有关？像之所以使用点符号的原因可能是因为它需要将数据传递给子代，但是如果我使用单独的标记而不是也许它无法正确传递数据，则会导致应用崩溃？

基本上，我的问题是，当react-bootstrap导航栏中内置点符号时，如何使用带有pug语法的react-bootstrap？

Answer 1

您可以为每个子组件提供参考：

import {Navbar, Nav, NavItem} from 'react-bootstrap'

const Header = Navbar.Header;
...other consts...

return pug`
  Navbar(default, collapseOnSelect)
    Header
      Brand
        Link(to='/') Ayyy
      Toggle

我可以在React-bootstrap Navbar中避免点符号吗？

1 个答案: