当前位置：首页 > news >正文

React 三元运算符页面切换：完整进出流程

news 2025/10/19 7:54:11

完整进出流程示例

1. 分组页面 ↔ 审核页面（双向切换）

// Account.tsx (分组页面)
const [currentPage, setCurrentPage] = useState<'account' | 'shenhe'>('account');return ({currentPage === 'account' ? (// 分组列表：进入审核页面<div><Table /><Button onClick={() => setCurrentPage('shenhe')}>进入审核</Button></div>) : (// 审核页面：返回分组页面<ShenHe onBack={() => setCurrentPage('account')}  // 返回入口/>)}
);

2. 审核页面 ↔ 审核详情页（双向切换）

// ShenHe.tsx (审核页面)
const [currentPage, setCurrentPage] = useState<'list' | 'detail'>('list');return ({currentPage === 'list' ? (// 审核列表：进入详情页<div><Table /><Button onClick={() => setCurrentPage('detail')}>审核本组  // 进入出口</Button></div>) : (// 审核详情：返回列表页<ShenHeDetail onBack={() => setCurrentPage('list')}  // 返回入口/>)}
);

3. 详情页中的返回实现

// ShenHeDetail.tsx (审核详情页)
interface ShenHeDetailProps {onBack?: () => void;  // 接收返回回调
}export default function ShenHeDetail({ onBack }: ShenHeDetailProps) {const handleBack = () => {if (onBack) {onBack();  // 触发返回上一页}};return (<div>{/* 详情页内容 */}<Button onClick={handleBack}>返回审核列表  // 用户点击返回</Button></div>);
}