React中如何修改Navbar组件状态实现导航按钮文本切换？

核心错误点 #

• props接收语法错误：函数组件的所有入参都在第一个props对象里，你把children拆成第二个入参属于错误写法，会导致props接收异常。
• 切换逻辑未触发重渲染：React组件只有state变化或props变化才会重渲染，你之前直接修改事件对象、仅在工具函数里返回文本的操作，没有同步到组件状态，界面自然不会更新。
• useState用法错误：你之前写的makeCustToggle(!props.custOrFalse)，props是只读的父组件传入值，永远取的是初始props的反值，点击一次后就不会再变化。
• onClick绑定错误：onClick={custToggle(xxx)}这种写法会在组件渲染时直接执行函数，不是点击时触发，除非函数返回另一个可执行函数。

正确实现代码 #

import { useState } from 'react';
// 提前引入你的样式文件和CustomNavButton组件

const Navbar = ({ custOrFalse: initCustState, children, ...restProps }) => {
  // 用本地state管理按钮切换状态，初始值取传入的props，无传入时默认false
  const [custOrFalse, makeCustToggle] = useState(initCustState ?? false);

  // 切换逻辑，修改本地state触发组件重渲染
  const handleCustToggle = () => {
    // 函数式更新保证取到最新的状态值
    makeCustToggle(prev => !prev);
    // 如果需要把状态同步给父组件，可在这里加一行 restProps.onCustToggle?.(!custOrFalse)
  };

  // 按钮文本直接从状态计算，避免重复判断
  const custButton = custOrFalse ? 'cust login' : 'cust page';

  const [grid, makeGrid] = useState(false);
  const [publish, makePublish] = useState(false);
  const [research, makeResearch] = useState(false);

  return (
    <div>
      <nav className = {`${styles.page__menu} ${styles.page__custom_settings} ${styles.menu}`} >
        <ul className = {`${styles.menu__list} ${styles.r_list}`} >
            <CustomNavButtonLeft navButton='the grid'       onClick=''  />
            <CustomNavButtonLeft navButton='publish'        onClick=''  />
            <CustomNavButtonLeft navButton='research'       onClick=''  />
            <CustomNavButtonRight navButton={custButton}  onClick={handleCustToggle}  />
        </ul>
      </nav>
    </div>
  );
};

export default Navbar;

受控组件适配方案 #

如果你需要父组件完全控制按钮状态，不需要Navbar本地维护state，可以按以下方式修改：

1. 父组件内管理状态和切换方法，通过props传入Navbar：

const [custOrFalse, setCustOrFalse] = useState(false);
// 渲染Navbar时传参
<Navbar custOrFalse={custOrFalse} onCustToggle={() => setCustOrFalse(prev => !prev)} />

2. Navbar内直接使用props传入的值，不需要本地state：

const Navbar = ({ custOrFalse, onCustToggle, children, ...restProps }) => {
  const custButton = custOrFalse ? 'cust login' : 'cust page';
  // 其余代码不变，按钮onClick直接绑定传入的onCustToggle即可
}

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