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很复杂，并且生成的元素具有“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

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

Answer 2

我之前使用过ReactStrap，根据我的经验，如果你开始获得不稳定的样式属性，你经常需要使用Bootstrap类来代替组件。

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

希望这可以帮助！