React中点击按钮返回上一页面/组件的实现方案探讨：状态切换组件场景下的最优实践

兄弟，你的这个需求用你现有的条件渲染方式完全没问题，而且是最直接的解决方案！甚至可以说这就是这种简单组件切换场景下的最优解，没必要过度复杂化。

方案一：沿用现有条件渲染（推荐） #

你只需要给<InputEmail />组件传递一个回调函数作为props，让它能通知父组件切换回初始状态就行。具体步骤：

1. 父组件里给InputEmail传入返回回调：

{ !showForm ? (
  <div className={styles.showTicketContainer}>
    <div className={styles.showTicketBox}>
      // 初始UI代码
    </div>
    <div className={styles.whitelistBox}>
      <Button 
        className={styles.whiteListToggleButton} 
        shape="round" 
        onClick={() => setShowForm(true)}
      >
        Whitelist
      </Button>
    </div>
  </div>
) : (
  <InputEmail onBack={() => setShowForm(false)} /> // 传入回调
)}

2. 在InputEmail组件里添加返回按钮，并调用这个回调：

// InputEmail.jsx
function InputEmail({ onBack }) {
  return (
    <div>
      // 你的输入邮箱UI代码
      <Button onClick={onBack}>返回</Button>
    </div>
  )
}

这种方式的好处是：

• 完全复用你现有的状态逻辑，不需要新增额外依赖
• 代码简洁直观，维护成本低
• 适合这种只有两个组件切换的简单场景

方案二：更复杂场景的替代方案 #

如果之后你的组件切换逻辑变得更复杂（比如有3个以上的步骤、组件嵌套层级很深），可以考虑以下两种方案：

1. 使用React Router做路由切换 #

把两个“页面”拆分成不同的路由，用useNavigate来实现前进后退：

// 父组件用路由配置
import { Routes, Route, useNavigate } from 'react-router-dom';

function ParentComponent() {
  const navigate = useNavigate();
  return (
    <Routes>
      <Route path="/" element={
        <div className={styles.showTicketContainer}>
          // 初始UI
          <Button onClick={() => navigate('/whitelist')}>Whitelist</Button>
        </div>
      } />
      <Route path="/whitelist" element={
        <InputEmail onBack={() => navigate(-1)} />
      } />
    </Routes>
  )
}

这种方式适合需要浏览器地址栏同步状态、或者有更多页面切换的场景。

2. 使用状态管理工具（Context/Redux） #

如果多个组件都需要控制这个切换状态，可以把showForm状态放到全局上下文或者Redux store里，这样任何组件都能直接修改状态，不需要层层传递props。不过对于你当前的简单场景来说，这属于过度设计，没必要。

总的来说，就你现在的需求，沿用原有的条件渲染+props回调是最优选择，简单高效，完全满足需求。

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