ReactStrap NavLinks 在通过组件呈现时被破坏答案

【问题标题】：ReactStrap NavLinks are broken when rendered via a componentReactStrap NavLinks 在通过组件呈现时被破坏
【发布时间】：2019-08-31 06:38:11
【问题描述】：

以下代码在我的 ReactStrap DropdownMenu 中正确呈现我的 NavLink：

<!-- RENDERS CORRECTLY -->

<Nav className="ml-auto" navbar>
    <UncontrolledDropdown nav inNavbar>
        <DropdownToggle nav caret> A dropdown menu </DropdownToggle>
          <DropdownMenu>
            <NavLink className="dropdown-item" to=“/url1”> item 1 </NavLink>
            <NavLink className="dropdown-item" to=“/url2”> item 2 </NavLink>
          </DropdownMenu>
     </UncontrolledDropdown>
</Nav>

但是，如果我将 DropdownMenu 移动到一个单独的组件中，如下所示，返回完全相同的 JSX，css 很糟糕，并且生成的 a 元素具有“to”属性而不是“href”属性，因此链接不起作用.

<!-- BREAKS -->

<Nav className="ml-auto" navbar>
    <UncontrolledDropdown nav inNavbar>
        <DropdownToggle nav caret> A dropdown menu </DropdownToggle>
          <DropdownMenuComponent/>
     </UncontrolledDropdown>
</Nav>

...

class DropdownMenuComponent extends Component {    
    render() {
        return (
            <DropdownMenu>
               <NavLink className="dropdown-item" to=“/url1”> item 1 </NavLink>
            <NavLink className="dropdown-item" to=“/url2”> item 2 </NavLink>
            </DropdownMenu>
        );
    }
}

有什么办法可以解决这个问题吗？如果我不能指望组件的基本嵌套，那么使用 ReactStrap 会令人不安。

【问题讨论】：

我确定这是一个错字，但在您的第二个代码示例中，我没有看到任何使用 DropdownMenuComponent 的地方（例如嵌套在您的 Nav 中）。

标签： reactjs reactstrap

【解决方案1】：

您必须将链接包装在 <DropdownItem> 组件中，然后它们才能正确呈现。

我整理了一个工作沙箱here

import React from "react";
import ReactDOM from "react-dom";
import {
  Nav,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  NavLink
} from "reactstrap";
import "bootstrap-css-only";


const DropdownComponent = () => (
  <DropdownMenu>
    <DropdownItem>
      <NavLink className="dropdown-item" to="/url1">
        item 1
      </NavLink>
    </DropdownItem>
    <DropdownItem>
      <NavLink className="dropdown-item" to="/url2">
        item 2
      </NavLink>
    </DropdownItem>
  </DropdownMenu>
);

const App = () => {
  return (
    <Nav className="ml-auto" navbar>
      <UncontrolledDropdown nav inNavbar>
        <DropdownToggle nav caret>
          A dropdown menu
        </DropdownToggle>
        <DropdownComponent />
      </UncontrolledDropdown>
    </Nav>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

甜蜜-谢谢！让我感到困惑的是，只有在通过组件提供 DropdownMenu 时才需要 DropdownItem 包装器。
@MikeCantor 很高兴它对您有所帮助。您应该始终按照文档将DropdownMenu 的子代包装在DropdownItem 组件中。这就是图书馆正在寻找的东西，其他任何东西都是未定义的行为。如果这回答了您的问题，请使用复选标记接受答案。

【解决方案2】：

我以前使用过 ReactStrap，根据我的经验，如果您开始获得不稳定的样式属性，您通常必须使用 Bootstrap 类来代替组件。

另外，在您的第二个示例中，当代码中断时，您的 Nav 组件不会渲染到 DOM，因为它不会在 render() 生命周期方法中返回。您需要将它放在现有的 DropdownMenuComponent 渲染方法中，或者为 Nav 创建一个新组件并将其导入到父组件中以使其正确呈现。

希望这会有所帮助！

【讨论】：