React 让网络应用聊天也适用于移动设备

Question

我在我的小型网络应用程序中有以下聊天组件。它有 2 个子组件 ChatHistory, ChatMessages，第一个用于显示与其他用户的所有聊天，第二个用于消息。

export default function Chat() {
  return (
    <div className="chat">
      <ChatHistory />
      <ChatMessages />
    </div>
  );
}

在网络版本上，它按预期工作，左侧是聊天列表，右侧是对话。但现在我想让它也适用于移动设备。因此，我想首先显示 ChatHistory，当用户选择聊天时，他们将被重定向到该聊天室的 ChatMessages。这有点棘手，因为我想弄清楚如何在这些组件之间相互传递道具。此外，我一直在考虑在移动设备上将它们分开在不同的路线中，例如 /chats 和 /converstations。我希望有人能解释在这里做什么，或者提供一些你能帮助我的东西，因为我不知道如何搜索。

Answer 1

我明白你的要求，希望这对你有帮助。

第 1 步：

npm i react-router-dom

第 2 步：创建组件

// Chat Component
function Chat() {
  return (
    <div className="chat">
      <ChatHistory />
    </div>
  );
}

// Chat History Component with some dummy history
function ChatHistory() {
  const history = useHistory();
  const histories = [
    { username: "user1", id: 1 },
    { username: "user2", id: 2 },
    { username: "user3", id: 3 },
    { username: "user4", id: 4 },
  ];
  return (
    <div>
      {histories.map((hist) => {
        return (
          <h1 key={hist.id} onClick={() => history.push(`/${hist.id}`)}>
            {hist.username}
          </h1>
        );
      })}
    </div>
  );
}

// Chat message Component
function ChatMessages() {
  const { chatId } = useParams();
  return (
    <div>
      <h1>Welcome to chat id: {chatId}</h1>
    </div>
  );
}

主要组件

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Switch, useParams, useHistory} from "react-router-dom";
function App() {
  return (
    <div className="app">
      <Router>
        <Switch>
          <Route path="/:chatId">
            <ChatMessages />
          </Route>
          <Route path="/">
            <Chat />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

尝试遵循此代码，希望它对您有所帮助。祝你好运

Answer 2

您可以使用路由，在 web 上使用 react-router-dom，如果您想在 React Native 应用程序上使用路由，请使用 react-native-router。我不知道这是否有帮助，但如果你不明白我在说什么，请告诉我我会通过例子向你展示我的意思