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

大佬教程收集整理的这篇文章主要介绍了如何使 HTML 元素可用于 Nextjs 中的多个页面？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我正在尝试制作一个网站，该网站的左侧有一个目录，中间有每个部分的内容，右侧有一个概述。 一般概念：

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

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 文件并创建另一个函数：

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

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

但我无法渲染它。

如何做到这一点？

解决方法

import NavBar from "./NavBar";

const Layout = ({ children }) => {

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

export default Layout;

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

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

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

export default MyApp;

大佬总结

以上是大佬教程为你收集整理的如何使 HTML 元素可用于 Nextjs 中的多个页面？全部内容，希望文章能够帮你解决如何使 HTML 元素可用于 Nextjs 中的多个页面？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。