问我能避免在反作用力中的点表示法吗？
EN

Stack Overflow用户

提问于 2018-06-27 18:24:44

回答 1查看 469关注 0票数 0

我对我的问题的帖子/解释有点长，所以我会把问题放在顶部和底部：

如何使用带有pug语法的react引导，当将点表示法内置到react引导导航栏中时？

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

我跟随一个视频教程学习如何使用。然而，与本教程不同的是，我使用的是pug jsx-加载程序，这样我就可以使用pug语法编写我的反应性组件。在我们到达肚脐那部分之前一切都很顺利。

下面是代码的样子：

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类=‘Header’

我想我可以尝试通过修改react引导中的一些源代码来解决这个问题。我发现，在引导代码中的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控制台中有一个错误:元素类型无效:需要一个字符串(用于内置组件)或一个类/函数(用于复合组件)，但是: got: undefined。

我假设这个错误与纳瓦尔巴的状态有关？就像它使用点表示法的原因一样，可能是因为它需要将数据传递给孩子，但是如果我使用一个单独的标记，而不是可能它不能正确地传递数据，并导致应用程序崩溃？

基本上，我的问题是，我如何使用带有pug语法的react引导，如果在dot引导导航栏中内置了点表示法？

reactjs

pug

react-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-27 18:29:33

您可以为每个子组件提供一个引用：

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

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

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