我如何将数据从一个组件传递到 react.js 中的另一个组件

Question

我在聊天应用程序中工作，我想像电报和其他聊天应用程序一样显示所选用户的姓名。我有 2 个组件来显示所有可用的用户并显示选定的用户。我已经从 firebase 中获取了用户数据并将其显示在 .如何在组件中显示所选用户的名称。

这是我目前尝试过的。

Chats.js

function Chats() {

    const userRef = firestore.collection('users');
    const [users] = useCollectionData(userRef, {idField: 'uid'});

    const passdata = () => {
        //
    }

    return (
    {users && users.map((user) => (
                <Sample onClick={passdata}>
                    <Photo><img src={user.photoURL} referrerpolicy="no-referrer" /></Photo>
                    <Info>
                        <UserName>{user.displayName}</UserName>
                    </Info>
                </Sample>
            ))}
    )
}

SelectedChat.js

function SelectedChat() {
    <Profile>
        <Photo><img src={} referrerpolicy="no-referrer"/></Photo>
        <UserName>{}</UserName>
    </Profile>
}

this is the screen shot of the chat app

即我正在使用 Firebase

Answer 1

因此，如果我理解正确的话，这两个组件彼此独立，但您需要将选定的用户名从用户列表传递到选定的聊天组件。 在这种情况下，最好的方法是使用服务。

1.创建服务

在您的项目目录中创建一个 usersService.js 文件并将以下代码粘贴到其中。

export class usersService = () => {
          constructor() {
            this.user = null;
          }
};

2.注册/获取选定的用户

在返回括号内添加以下函数，该函数将从您的聊天组件中保存所选用户。

export class usersService = () => {
          constructor() {
            this.user = null;
          }
          
          setCurrentUser(user) {
            this.user = user;
          }
      
          getCurrentUser() {
            return this.user;
          }
};

3.在 Chat.js 组件中注册用户名

在您的 Chat.js 文件中导入服务 import usersService from './path'，然后在您的 passdata 方法中，您可以注册所选用户并将其传递给服务。

const passdata = (user) => {
  usersService.setCurrentUser(user);
}

并在您的 html 中：<Sample onClick={passdata(user.displayName)}>

4.在 SelectedChat.js 组件中获取选定的用户名

像在 Chat.js 组件中一样导入服务，然后您可以使用 getCurrentUser() 方法获取所选用户：

function SelectedChat() {
    <Profile>
        <Photo><img src={} referrerpolicy="no-referrer"/></Photo>
        <UserName>{usersService.getCurrentUser}</UserName>
    </Profile>
}

我认为这将解决您的问题，祝您好运