React.js NavBar：是否可以引用不同組件的標記？ （嘗試創建一個導航欄來引用一條路線中的組件）

Question

基本上，我正在嘗試為個人網站應用程序制作導航欄，其中導航欄在單個頁面（路線）上引用內容（關於/技能等）。 制作導航欄時，我可以輕松地使用 ids/classes 引用標記，但我必須將所有 html 放在一個文件中。

我注意到，如果我要將每個內容分成自己的反應文件（About.jsx、Skills.jsx 等）並導入它們，我似乎沒有辦法引用反應組件的標記。

我還注意到使用反應路由器，這是不可行的，因為每個組件都將位於單獨的路由（我不想要）上，而不是在單個路由上。

---

這是下面我當前的導航欄文件； 我如何准確地導入和引用單獨組件的標記？

import React from 'react';
import "../Styles/NavBar.scss";
import About from "./About.jsx"; (Not used)
import Skills from "./Skills.jsx"; (Not Used)
import Projects from "./Projects.jsx"; (Not used)

const NavBar = () => (
    <div class="MainDivWrapper">
        <div class="NavBarDiv">
            <h1 class="NavBarH1">NavBar</h1>
            <br/>
            <nav> 
                <a href="#AboutDiv">About</a>
                <a href="#SkillsDiv">Skills</a>
                <a href="#ProjectsDiv">Projects</a>
            </nav>
            {/* <div id="AboutDiv">
                <h1>About Me</h1>
                <span>Just some text</span>
            </div>
            <div id="SkillsDiv">
                <h1>Skills</h1>
                <span>Just some text</span>
            </div>
            <div id="ProjectssDiv">
                <h1>Projects</h1>
                <span>Just some text</span>
            </div> */}

        </div>
        <hr class="HeaderDivider"/>
    </div>
)

Answer 1

您像這樣引用 JSX 導入：

/* Component have to start with a capital letter. file name can be anything (usually is the same as component) */
import MyComponent from "./MyComponent"

export default function MyApp() {
  return (
    <div>
      /* other html/components here */

      <MyComponent /> // selfing close tag
      /* or */
      <MyComponent> // with `children`
        some content
      </MyComponent>
    </div>
  )
}

這是您的代碼的代碼框實現： https://codesandbox.io/s/stack-reactjs-navbar-is-it-possible-to-reference-a-different-components-markup-64oic?file=/src/應用程序.js