React中Res组件按钮无法调用Chat组件问题求助

你在Res组件的按钮点击事件中直接返回<Chat/>组件，这种方式不会触发React的渲染流程——React不会自动将这个组件挂载到DOM中，所以点击按钮没有任何反应。

这里提供两种可行的解决方式，根据你的需求选择：

方式一：用状态控制Chat组件的显示/隐藏 #

通过React的useState钩子管理状态变量，控制Chat组件是否渲染：

修改Res.js文件：

import React, { useState } from 'react'
import { auth } from '../firebase.js'
import Signout from './Signout';
import Chat from './Chat'

function Res() {
    // 新增状态：控制Chat组件是否显示
    const [showChat, setShowChat] = useState(false)
    
    return (
        <div>
            {/* 点击按钮切换状态 */}
            <button onClick={()=> setShowChat(!showChat)}>Press</button>
            {/* 根据状态决定是否渲染Chat组件 */}
            {showChat && <Chat/>}
            <Signout/>
        </div>
    )
}

export default Res

方式二：使用react-router-dom实现路由跳转 #

如果你希望Chat是一个独立页面，可以通过路由导航实现：

第一步：修改App.js配置路由 #

import Res from './components/Res';
import Chat from './components/Chat';
import Signin from './components/Signin';
import './App.css';
import {auth} from './firebase.js'
import {useAuthState} from 'react-firebase-hooks/auth'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  const [user] = useAuthState(auth)
  return (
    <Router>
      {user ? (
        <Routes>
          {/* 登录后默认显示Res页面 */}
          <Route path="/" element={<Res/>} />
          {/* Chat页面路由 */}
          <Route path="/chat" element={<Chat/>} />
        </Routes>
      ) : (
        <Signin/>
      )}
    </Router>
  );
}

export default App;

第二步：修改Res.js使用导航跳转 #

import React from 'react'
import { useNavigate } from 'react-router-dom';
import { auth } from '../firebase.js'
import Signout from './Signout';

function Res() {
    // 获取导航实例
    const navigate = useNavigate()
    
    return (
        <div>
            {/* 点击按钮跳转到Chat页面 */}
            <button onClick={()=> navigate('/chat')}>Press</button>
            <Signout/>
        </div>
    )
}

export default Res

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