React JS Page 添加組件時 - 但沒有錯誤？

Question

當我將導航組件添加到我的 App.js 文件時，整個網站都是空白的。 但是，當我添加我的其他組件（如 Header）時，頁面工作得很好。 我錯過了什么嗎？ 沒有任何錯誤或錯誤出現，這非常令人困惑。

import { useState } from 'react'
import Navigation from './components/Navigation'
import Header from './components/Header';
import Collection from './components/Collection';



function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
     <Navigation />
      <Header />
      <Collection />
    </div>
  )
}

export default App

import { useState } from "react";
import logo from "../icons/logo.svg";
import CSS from "../styles/Navigation.css";
import hamburger from "../icons/icon-hamburger.svg";
import hamburgerClose from "../icons/icon-close.svg";
import { MobileMenu } from "../components/MobileMenu";

function navigation() {
  
  state = { clicked: false }

  handleClick = () => {
    this.setState({ clicked: !this.state.clicked })
  }

  return (
    <>
      <div className="navigation">
        <img className="logo" src={logo} />

        <button className="hamburger" onClick={this.handleClick}>

        <img className={this.state.clicked ? {hamburger} : {hamburgerClose}}/>
        </button>

        <div className="navigation-menu">
          <ul>
            {MobileMenu.map((item, index) => {
              return (
                <li key={index}>
                  <a className={item.className} href={item.url}>
                    {item.title}
                  </a>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </>
  );
}

export default navigation;

Answer 1

state 只能用於 class 組件。 使用鈎子，您也可以將 state 應用於功能組件。 Below code example

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}