React组件开发：如何在指定页面隐藏Next/Previous按钮？

核心思路 #

根据当前页面索引（num）和按钮类型（title），条件渲染按钮：

• 当索引为0时，隐藏"Previous"按钮
• 当索引为2时，隐藏"Next"按钮

优化后的代码 #

import { Button } from '@chakra-ui/button';
import React from 'react';

export const StepperButton: React.FC<{ 
  title: string; 
  num: number; 
  onClick: (...args: any) => void 
}> = ({ title, num, onClick }) => {
  // 判断按钮是否需要显示
  const shouldShow = (title === 'Previous' && num !== 0) || 
                    (title === 'Next' && num !== 2);

  // 不需要显示时直接返回null，不渲染按钮
  if (!shouldShow) return null;

  return (
    <Button
      style={{
        width: '244.71px',
        height: '41.41px',
        backgroundColor: '#FF8C1E',
        borderRadius: '8px',
        fontWeight: '600',
        fontSize: '14px',
        lineHeight: '21px',
        color: '#FFFFFF',
        textTransform: 'uppercase'
      }}
      onClick={onClick}
    >
      {title}
    </Button>
  );
};

代码说明 #

1. 移除冗余代码：删掉了未使用的show状态和disabledButton函数，直接通过条件渲染控制按钮显示，比禁用更符合需求。
2. 简化逻辑判断：用shouldShow变量明确判断当前按钮的显示状态，逻辑直观易维护。
3. 修正点击事件：点击按钮仅触发父组件传入的onClick回调，隐藏逻辑完全由当前页面索引决定，和点击行为无关。

使用示例 #

在父组件中传入当前页面索引即可：

// 假设currentPage是当前页面的索引值（0/1/2）
<StepperButton 
  title="Previous" 
  num={currentPage} 
  onClick={() => {/* 上一页切换逻辑 */}} 
/>
<StepperButton 
  title="Next" 
  num={currentPage} 
  onClick={() => {/* 下一页切换逻辑 */}} 
/>

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