服务器端渲染的 Nextjs Bootstrap Dropdown 问题

Question

我正在尝试构建一个包含几个链接的下拉导航。它在浏览器上运行良好。但是下拉菜单的 HTML 没有在页面源中呈现。

导航组件

function Navigation() {
    return (
        <Navbar bg="light" expand="lg">
            <Link href="/" passHref>
                <Navbar.Brand>React-Bootstrap</Navbar.Brand>
            </Link>

            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Link href="/" passHref>
                        <Nav.Link>Home</Nav.Link>
                    </Link>

                    {/* Missing html on page source */}
                    <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">
                            Action
                        </NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">
                            Another action
                        </NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.4">
                            Separated link
                        </NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
}

我正在从 _app.js

渲染这些导航

import React from "react";
import Nav from "../components/nav";

import "bootstrap/dist/css/bootstrap.min.css";

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Nav />
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

在页面源中，我得到以下输出：

<div id="__next">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a href="/" class="navbar-brand">React-Bootstrap</a><button aria-controls="basic-navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed"><span class="navbar-toggler-icon"></span></button>
      <div class="navbar-collapse collapse" id="basic-navbar-nav">
         <div class="mr-auto navbar-nav">
            <a href="/" data-rb-event-key="/" class="nav-link">Home</a>
            <div class="nav-item dropdown"><a aria-haspopup="true" aria-expanded="false" id="basic-nav-dropdown" href="#" class="dropdown-toggle nav-link" role="button">Dropdown</a></div>
         </div>
      </div>
   </nav>
</div>

但我看不到那些与下拉相关的 HTML 的 HTML 源代码。

Answer 1

默认情况下，NavDropdown 组件在挂载时不会渲染其子级，只有在单击时才会渲染。要强制在装载时渲染导航项目，您可以将 renderMenuOnMount 属性设置为 true。

<NavDropdown title="Dropdown" id="basic-nav-dropdown" renderMenuOnMount={true}>
    // ...
</NavDropdown>