React中如何将主头部Navbar选中值传递给子头部SubNavBar并更新？

因为Navbar和SubNavBar的共同父组件是Layout，所以采用状态提升的方式就能实现需求，把选中状态放在父组件中管理，再传递给两个子组件。

1. 修改Layout组件 #

在父组件里添加状态保存选中的导航值，同时把更新状态的方法传给Navbar，把选中值传给SubNavBar：

import { useState } from 'react';

const Layout = props => {
  // 保存选中的主导航值
  const [selectedNavValue, setSelectedNavValue] = useState('');

  return (
    <>
      {/* 传递更新状态的方法给Navbar */}
      <Navbar navlinks={Nav_Links} onNavSelect={setSelectedNavValue} />
      {/* 传递选中值给SubNavBar */}
      <SubNavBar selectedValue={selectedNavValue} />
      <main className={styles.main}>{props.children}</main>
    </>
  )
}

2. 修改Navbar组件 #

接收父组件传来的onNavSelect方法，在点击导航链接时调用它，把选中的值传递上去：

const Navbar = (props) => {
  const [isNavExpanded, setIsNavExpanded] = useState(false);

  const isExpanded = () => {
      setIsNavExpanded(!isNavExpanded);
  }

  const selectedHeader = (event) => {
      const selectedText = event.target.innerHTML;
      console.log(selectedText);
      // 调用父组件的方法，传递选中值
      props.onNavSelect(selectedText);
  }

  const mainLinks = props.navlinks.map((link) => {
      return <li key={link.id}>
          <NavLink to={link.url} onClick={selectedHeader} activeClassName="active">{link.text}</NavLink>
      </li>
   })

  // 原代码缺少返回JSX，补充完整导航结构（根据你的实际样式调整）
  return (
    <nav>
      <button onClick={isExpanded}>菜单</button>
      <ul className={isNavExpanded ? 'nav-expanded' : ''}>
        {mainLinks}
      </ul>
    </nav>
  )
}

3. 适配SubNavBar组件 #

接收selectedValue props，根据这个值更新子头部内容：

const SubNavBar = ({ selectedValue }) => {
  return (
    <div className="sub-nav-bar">
      {selectedValue && <span>当前选中主导航：{selectedValue}</span>}
      {/* 这里可以根据selectedValue渲染对应的子导航链接 */}
    </div>
  )
}

这样点击主头部的导航链接时，选中值会同步到父组件的状态中，再传递给子头部，子头部就能实时更新内容了。

内容的提问来源于stack exchange，提问作者chethan