如何在React导航栏中显示变量？

import React, { useState } from 'react';

function Navbar() {
  const [name, setName] = useState('John');

  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
}

export default Navbar;

import React, { useState } from 'react';

function Navbar() {
  const [name, setName] = useState('John');

  return (
    <div className="navbar">
      <h1>Hello, {name}!</h1>
      {/* 其他导航栏内容 */}
    </div>
  );
}

export default Navbar;