通过组件呈现时，ReactStrap NavLinks 被破坏

Question

以下代码在我的 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 会令人不安。

Answer 1

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

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

希望对您有所帮助！

Answer 2

您必须将链接包装在 <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);

通过组件呈现时，ReactStrap NavLinks 被破坏

ReactStrap NavLinks are broken when rendered via a component

reactjs

reactstrap