Question

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

//sorting first
 List<Long> sortedNums = request.stream().map(Request::getSequence)
                .collect(Collectors.toList()).stream().sorted().collect(Collectors.toList());

//getting first num to see if the seq starting from 1
Optional<Long> first = sortedNums.stream().findFirst();

        if (first.isPresent()) {
            if (first.get() != 1) {
                throw new BadRequestException("Sequence should start from 1");
            }
        }
//checking if the list is in consecutive order
 if(!isConsecutive(sortedNums)) {
            throw new BadRequestException("Sequences should be in consecutive order");
        }
 private boolean isConsecutive(List<Long> list) {
        for (int i = 1; i < list.size(); i++) {
            if (list.get(i - 1) + 1 != list.get(i)) {
                return false;
            }
        }
        return true;
    }

但是，如果我按如下所示将DropdownMenu移到一个单独的组件中，返回完全相同的JSX，则css就是螺丝钉，因此生成的元素具有“ to”属性，而不是“ href”属性，因此链接不起作用

<!-- 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>

有什么想法可以解决此问题吗？如果我不能指望组件的基本嵌套，那么使用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断开

2 个答案: