如何使 HTML 元素可用于 Nextjs 中的多个页面？

Question

我正在尝试创建一个具有左侧链接的目录的站点，中间是每个部分的内容，然后是右侧的概述。 一般概念：

目前所有代码都在一个 function 调用中：

import React from 'react';
import styles from '../styles/Home.module.css'
import table_of_contents from './test.js'

export default function Home() {
  return (
    <div className={styles.grid_container}>
      <div className={styles.left_pane}>
        <h3>1. Overview</h3>
          <div className={styles.subsection_nav_link}>
            <p>1.1 Hey</p>
            <p>1.2 Hey</p>
          </div>
        <h3>2. Hey</h3>
        <div className={styles.subsection_nav_link}>
          <h4>2.1 Hey</h4>
          <div className={styles.subsection_nav_link}>
            <p>2.1.1 Hey</p>
            <p>2.1.2 Hey</p>
            <p>2.1.3 Hey </p>
          </div>
          <h4>2.2 Hey</h4>
          <h4>2.3 Hey</h4>
          <div className={styles.subsection_nav_link}>
            <p>2.3.1 Hey</p>
            <p>2.3.2 Hey</p>
          </div>
          <h4>2.4 Hey</h4>
        </div>
        <h3>3. Hey</h3>
        <div className={styles.subsection_nav_link}>
            <p>3.1 Hey</p>
            <p>3.2 Hey</p>
            <p>3.3 Hey</p>
            <p>3.4 Hey</p>
        </div>
        <h3>4. Hey</h3>
          <h4>4.1 Hey</h4>
          <h4>4.2 Hey</h4>
          <h4>4.3 Hey</h4>
          <div className={styles.subsection_nav_link}>
            <p>4.3.1 Hey</p>
            <p>4.3.2 Hey (BT)</p>
            <p>4.3.3 Hey</p>
            <p>4.3.4 Hey</p>
            <p>4.3.5 Hey</p>
            <p>4.3.6 Hey</p>
          </div>
      </div>  
        
      <div className={styles.center_pane}>
        <h2>Center Pane</h2>
        <p>HeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHey</p>
      </div>
      <div className={styles.right_pane}>
        <h2>Right Pane</h2>
      </div>
      <div className={styles.footer}>
        Test
      </div>
  </div>
  )
}

我想让<div className={styles.left_pane}>...</div>可重复使用，因为我需要为文档中可以导航到的每个链接呈现它，但我仍在学习 Nextjs/js/ CSS等，所以我不明白这需要如何构建。

我尝试制作另一个 js 文件并创建另一个 function：

import React from 'react';
import styles from '../styles/Home.module.css'

export default function table_of_contents () {
  return (the div here)

但我无法让它渲染。

如何才能做到这一点？

Answer 1

我会将“导航栏”放在单独的文件中。 我会创建一个名为 components 的文件夹并将其放入其中。 你应该创建一个名为 Layout 的单独组件并将导航栏与它将接收的所有子项一起放入其中，请参见下面的代码：`

import NavBar from "./NavBar";

const Layout = ({ children }) => {

return (
    <div>
      <NavBar />
      {children}
    </div>
  );
};

export default Layout;

比 go 到您的 _app.js 文件并围绕所有内容包装布局，请参见下面的代码：

import "../styles/globals.css";

import Layout from "../components/Layout";

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

export default MyApp;

如果解释不清楚，这是我关于 stackoverflow 的第一篇文章。 如果您需要更多信息，请与我们联系。