修改window全局变量后React NavBar组件样式未更新如何解决？

• React 类组件仅在自身state或传入的props发生变更时才会触发重新渲染，你修改的是挂载在window上的全局变量，不属于React组件的响应式状态，因此React无法感知到值的变更，不会重新执行render方法，样式自然不会更新。
• 你在history.listen外修改全局变量能生效，是因为修改时机早于NavBar组件的首次渲染，首次渲染时取到的就是修改后的值。

方案1：全局状态托管（推荐） #

将hideHome状态放到全局状态管理容器（如React Context、Redux、MobX）中，NavBar组件订阅该状态，状态变更时会自动触发组件重渲染。
以React Context为例：

1. 定义全局Context

// src/contexts/NavConfigContext.js
import { createContext } from 'react';
export const NavConfigContext = createContext({
  hideHome: false,
  setHideHome: () => {}
});

2. 在App.js中提供Context值，监听路径变化更新状态

import { useState, useEffect } from 'react';
import { NavConfigContext } from './contexts/NavConfigContext';

function App() {
  const [hideHome, setHideHome] = useState(false);

  useEffect(() => {
    return history.listen((newLocation) => {
      // 按你的业务条件判断是否隐藏Home按钮
      const shouldHide = /* 你的判断逻辑 */;
      setHideHome(shouldHide);
    })
  }, [])

  return (
    <NavConfigContext.Provider value={{ hideHome, setHideHome }}>
      {/* 你的全站组件结构 */}
    </NavConfigContext.Provider>
  )
}

3. 在NavBar组件中消费Context

import { NavConfigContext } from './contexts/NavConfigContext';

class NavBar extends Component {
  static contextType = NavConfigContext;
  render() {
    return <Link to="/home" className={this.context.hideHome ? "hideHome" : ""}>Home</Link>
  }
}

方案2：自定义事件通知 #

如果不想引入全局状态，可以通过自定义事件通知NavBar强制更新：

1. App.js的路径监听逻辑中修改全局变量后派发事件

history.listen((newLocation, action) => {
  window.$hideHome = /* 你的条件判断结果 */;
  // 派发自定义事件通知状态变更
  window.dispatchEvent(new CustomEvent('hideHomeStatusChange'));
});

2. NavBar组件监听事件强制重渲染

class NavBar extends Component {
  componentDidMount() {
    window.addEventListener('hideHomeStatusChange', this.handleStatusChange);
  }
  componentWillUnmount() {
    window.removeEventListener('hideHomeStatusChange', this.handleStatusChange);
  }
  handleStatusChange = () => {
    this.forceUpdate();
  }

  // 原有render逻辑保持不变
}

方案3：逻辑内聚到NavBar组件 #

直接在NavBar内部监听路径变化，自己判断是否要隐藏Home按钮，不需要跨组件传值，逻辑更内聚：
如果使用react-router，可以用withRouter高阶组件包裹NavBar直接获取路径信息：

import { withRouter } from 'react-router-dom';

class NavBar extends Component {
  render() {
    // 直接从props拿到当前路径判断是否要隐藏按钮
    const hideHome = this.props.location.pathname === '/你的特定页面路径';
    return <Link to="/home" className={hideHome ? "hideHome" : ""}>Home</Link>
  }
}

export default withRouter(NavBar);

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