React使网络应用程序聊天也适用于移动设备

Question

我的小型web应用程序中有以下聊天组件。它有两个子组件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

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