React+Routes下点击Header按钮修改样式及组件数据传递问题

你之前浏览器崩溃的核心原因是循环引用：Header引入了App，App又引入了Header，导致组件无限递归渲染，直接撑爆浏览器内存。正确的做法是用React的「状态提升」方案，把背景样式的状态放在父组件App中管理，再把修改状态的方法传给子组件Header，具体操作如下：

1. 在App组件中管理背景样式状态 #

把背景样式的状态定义在App里，同时编写修改该状态的方法：

import { useState } from 'react';
import Header from './Header';

function App() {
  // 初始化背景样式，这里以切换深浅背景色为例
  const [bgStyle, setBgStyle] = useState({ backgroundColor: '#ffffff' });

  // 定义切换背景样式的方法
  const toggleBackground = () => {
    setBgStyle(prevStyle => ({
      backgroundColor: prevStyle.backgroundColor === '#ffffff' ? '#2d3436' : '#ffffff'
    }));
  };

  return (
    {/* 将样式绑定到App的根容器 */}
    <div style={bgStyle} className="app-container">
      {/* 把修改方法通过props传递给Header */}
      <Header onPowerToggle={toggleBackground} />
      {/* 其他页面内容 */}
    </div>
  );
}

export default App;

2. 在Header组件中调用传递过来的方法 #

Header里不需要引入App，直接通过props拿到修改方法，绑定到Power按钮的点击事件即可：

function Header({ onPowerToggle }) {
  return (
    <header className="header">
      {/* Header的其他元素 */}
      <button onClick={onPowerToggle}>Power</button>
    </header>
  );
}

export default Header;

这样操作后，点击Power按钮就会触发App里的状态修改，进而改变背景样式，同时彻底避免了循环引用问题，不会再出现浏览器崩溃的情况。

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