React开发井字棋时如何用onClick点击渲染不同组件？

核心思路是通过状态变量标记当前需要渲染的页面，点击按钮时修改这个状态值，再通过条件渲染匹配对应组件即可，具体实现步骤如下：

1. 预定义页面对应的状态标识 #

先约定几个固定值对应不同页面，避免硬编码出错：

• home：启动页
• game：游戏本体页
• rule：规则说明页
  退出按钮不需要对应独立页面，直接绑定关闭逻辑即可。

2. 在父组件中声明控制状态 #

假设你所有组件的顶层父组件为App.jsx，使用useState声明控制页面切换的状态：

import { useState } from 'react'
// 引入你已经写好的独立组件
import StartBtn from './components/StartBtn'
import RuleBtn from './components/RuleBtn'
import ExitBtn from './components/ExitBtn'
import Game from './components/Game'
import RulePage from './components/RulePage'
import Home from './components/Home' // 你的启动页容器，内置三个按钮

function App() {
  // 初始默认渲染启动页
  const [currentPage, setCurrentPage] = useState('home')

  // 退出逻辑，根据你的运行环境调整
  const handleExit = () => {
    // 浏览器环境直接关闭标签页，桌面端打包可替换为对应平台的关闭API
    window.close()
  }

3. 给按钮绑定状态修改回调 #

将修改状态的方法通过props传递给启动页的三个按钮，触发点击时更新页面状态：

// 启动页组件接收回调props，绑定到对应按钮
function Home({ onStart, onShowRule, onExit }) {
  return (
    <div className="home-wrapper">
      <StartBtn onClick={onStart} />
      <RuleBtn onClick={onShowRule} />
      <ExitBtn onClick={onExit} />
    </div>
  )
}

// 回到App组件，完成条件渲染逻辑
  return (
    <div className="app-container">
      {/* 条件渲染对应页面 */}
      {currentPage === 'home' && (
        <Home
          onStart={() => setCurrentPage('game')}
          onShowRule={() => setCurrentPage('rule')}
          onExit={handleExit}
        />
      )}
      {currentPage === 'game' && <Game />}
      {currentPage === 'rule' && <RulePage />}
    </div>
  )
}

export default App

可选优化 #

如果需要从规则页/游戏页返回启动页，只需要在对应页面组件中添加返回按钮，绑定() => setCurrentPage('home')的回调即可，逻辑和上述完全一致。
如果项目后续要扩展更多页面，也可以引入react-router做路由跳转管理，无需手动维护状态。

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