React中通过useState值实现组件显隐的问题求助

我用React和Bootstrap搭建带静态页脚的网站，页脚有Back和Next按钮，点击Back递减索引、点击Next递增索引，想通过这个索引结合三元表达式控制组件的display属性实现显示/隐藏。但在App.js和Footer.js里分别用useState后，状态没法在组件间传递，以下是无效代码：

无效代码 #

Footer.js #

import React from "react";
import { useState } from "react";

const Footer = (props) => {

const [pageIndex, setPageIndex] = useState(0);

  return (
    <div className="container-lg">
      <div class="row justify-content-between mt-5">
        <button 
          onClick={setPageIndex(pageIndex - 1)}
          >
          Back
        </button>
        <button 
          onClick={setPageIndex(pageIndex + 1)}
          >
          Next
        </button>
      </div>
    </div>
  );
};
export default Footer;

App.js #

function App() {
  return (
    <div className="App">
      <div style={{display: Footer.pageIndex === 0 ? 'inline' : 'none'}}>
        <Component />
      </div>
      <div style={{display: Footer.pageIndex === 1 ? 'inline' : 'none'}}>
        <AnotherComponent />
      </div>
      <Footer />
    </div>
  );
}

export default App;

解决方案：状态提升 #

核心是把共享状态pageIndex放到父组件App.js中，通过props传递给Footer组件，同时把修改状态的方法也传给Footer，让Footer触发状态更新。

修改后的App.js #

import { useState } from "react";
import Footer from './Footer';
import Component from './Component';
import AnotherComponent from './AnotherComponent';

function App() {
  // 把状态放在父组件中统一管理
  const [pageIndex, setPageIndex] = useState(0);

  return (
    <div className="App">
      {/* 用父组件的pageIndex控制组件显示 */}
      <div style={{display: pageIndex === 0 ? 'inline' : 'none'}}>
        <Component />
      </div>
      <div style={{display: pageIndex === 1 ? 'inline' : 'none'}}>
        <AnotherComponent />
      </div>
      {/* 把状态和修改方法通过props传给Footer */}
      <Footer pageIndex={pageIndex} setPageIndex={setPageIndex} />
    </div>
  );
}

export default App;

修改后的Footer.js #

import React from "react";

const Footer = ({ pageIndex, setPageIndex }) => {
  // 不再维护自身状态，使用父组件传递的props
  return (
    <div className="container-lg">
      <div className="row justify-content-between mt-5">
        {/* onClick需传递函数，避免组件渲染时立即执行状态更新 */}
        <button 
          onClick={() => setPageIndex(prev => Math.max(prev - 1, 0))}
        >
          Back
        </button>
        <button 
          onClick={() => setPageIndex(prev => prev + 1)}
        >
          Next
        </button>
      </div>
    </div>
  );
};
export default Footer;

关键说明 #

• 状态提升：共享状态必须放在共同的父组件中，子组件通过props获取状态和修改方法，这是React组件间状态传递的基础逻辑
• onClick事件处理：不能直接写onClick={setPageIndex(pageIndex -1)}，否则组件渲染时会立即执行setPageIndex，导致无限循环，必须用匿名函数包裹状态更新逻辑
• 边界控制：给Back按钮加了Math.max(prev -1, 0)，避免索引变成负数，你也可以根据实际组件数量给Next按钮加最大值限制，比如Math.min(prev +1, maxIndex)

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