如何获取点击的用户名并传递至另一个React组件？

你当前的代码实现了侧边栏的显示/隐藏功能，但没有将点击的用户信息传递给SideBarProfile组件。要解决这个问题，需要在父组件（CarouselUsers）中维护选中用户的状态，再将该状态传递给子组件（SideBarProfile），具体修改步骤如下：

1. 在CarouselUsers中添加选中用户状态 #

新增selectedUser状态，用于存储被点击用户的完整信息：

const [selectedUser, setSelectedUser] = useState(null);

2. 修改点击事件，传递当前用户 #

替换原有的openProfile函数，点击用户时同时设置选中用户和侧边栏显示状态：

const handleUserClick = (user) => {
  setSelectedUser(user);
  setProfile(true); // 直接打开侧边栏，无需切换状态
};

同时更新用户卡片的点击事件，传入当前循环的用户对象：

<div 
  className="box"
  style={{ background: `linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 0,rgba(0,0,0,.6) 100%),url(${euTeste})` }} 
  onClick={() => handleUserClick(user)}
  key={user.id} // 用user.id作为key，避免用户名重复导致的渲染问题
>

3. 将选中用户传递给SideBarProfile #

修改组件调用，新增selectedUser属性，并将关闭侧边栏的逻辑简化：

<SideBarProfile 
  profile={profile} 
  openProfile={() => setProfile(false)} 
  selectedUser={selectedUser} 
/>

4. 在SideBarProfile中接收并显示用户名 #

在组件props中添加selectedUser，并在对应位置渲染用户名（使用可选链操作符避免空值报错）：

<div className="nome text-center">
  <h5>{selectedUser?.nome || '未选择用户'}</h5>
</div>

修改后的完整代码 #

CarouselUsers.jsx #

import React, { useState, useEffect } from 'react';
import * as Styled from './style.jsx';
import { collection, getDocs } from "firebase/firestore";
import { Swiper, SwiperSlide } from "swiper/react";
import { db } from '../../Data/Firebase.jsx';
import "swiper/css";
import euTeste from '../../assets/teste.jfif'
import SideBarProfile from '../../components/SideBarProfile/SideBarProfile.jsx';

export default function CarouselUsers() {
  const [profile, setProfile] = useState(false)  
  const [selectedUser, setSelectedUser] = useState(null);

  const handleUserClick = (user) => {
    setSelectedUser(user);
    setProfile(true);
  };

  const [users, setUsers] = useState([])
  const usersCollectionRef = collection(db, "usuarios")

  useEffect(() => {    
    const getUsers = async () => {
      const data = await getDocs(usersCollectionRef);
      setUsers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))); 
    };
    getUsers();
  }, []);
 
  return (
    <>
    <Styled.CarouselUsers>
      <div className="boxMembros">
        <div className="titulo">
          <h6>Membros</h6>
        </div>
        <Swiper spaceBetween={10} slidesPerView={3}> 
          {users.map((user) => (
            <SwiperSlide key={user.id}>
              <div 
                className="box"
                style={{ background: `linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 0,rgba(0,0,0,.6) 100%),url(${euTeste})` }} 
                onClick={() => handleUserClick(user)}
              >
                <div className="infoBottom">
                  <div className="info">   
                    <h6>{user.nome}</h6>
                  </div>                        
                </div>
              </div>  
            </SwiperSlide>                  
          ))}
        </Swiper>
      </div>
    </Styled.CarouselUsers>    
    <SideBarProfile 
      profile={profile} 
      openProfile={() => setProfile(false)} 
      selectedUser={selectedUser} 
    />
    </>
  )
}

SideBarProfile.jsx #

import React from 'react'
import { XCircle, WhatsappLogo } from "phosphor-react";
import * as Styled from './style.jsx';

export default function SideBarProfile({ openProfile, profile, selectedUser }) {  
  return (
    <Styled.SideBarProfile>
      <div className={profile ? 'col-md-3 boxLeftWrapper open' : 'col-md-3 boxLeftWrapper close'}>
        <div className="boxAll">
          <div className="header d-flex justify-between align-items-center">
            <div className="titulo">
              <h1>Perfil</h1>
            </div>
            <div className="close">
              <button onClick={openProfile}>
                <XCircle/>
              </button>
            </div>
          </div>
          <div className="boxBodyUser text-left">
            <div className="boxThis">
              <div className="foto">
                <img alt="Usuário" className='img-fluid ativo' />
              </div>
              <div className="nome text-center">
                <h5>{selectedUser?.nome || '未选择用户'}</h5>
              </div>
              <div className="status ativo">
                <span>Ativo</span>
              </div>
              <div className="ministerios">
                <ul className="pl-0 list-none mb-0">
                  <li>Teatro</li>
                  <li>Mídias Sociais</li>
                </ul>
              </div>
              <div className="boxContato mt-5">
                <div className="whatsapp d-flex items-center justify-center gap-2">
                  <WhatsappLogo/>
                  <span>Mensagem</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> 
    </Styled.SideBarProfile>    
  )
}

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