如何为松弛克隆创建新通道按钮答案

【问题标题】：How to create new channel button for slack clone如何为松弛克隆创建新通道按钮
【发布时间】：2019-08-16 18:02:36
【问题描述】：

我需要创建一个按钮，以便在我的 Slack 克隆中创建一个新频道。我需要按钮来呈现一个窗口，用户可以在其中输入他们想要的频道名称，并且在用户按下提交后，新频道会呈现在频道列表中。

我可以对 Room 组件中的频道进行硬编码。但我不知道如何动态创建新房间。我正在使用 React、Redux、React Hooks 和 Socket.io

export default props => {
  useEffect(() => {
    join(props.match.params.roomname);
  }, props.match.params);

  return (
    <div className="container">
      <div className="channels">
        <Link to="/general">General</Link>
        <Link to="/foobar">Foobar</Link>
        <Link to="/CodeChat">Code Chat</Link>
        <button type="submit">New Rooom</button>
      </div>
      <div>
        <button onClick={logout}>Logout</button>
      </div>
      <Messages room={props.match.params.roomname} />
      <ChatForm room={props.match.params.roomname} />
    </div>
  );
};

我希望新房间在频道列表中创建一个链接。

【问题讨论】：

您将此聊天系统的基础数据存储在哪里？服务器？什么是数据形状？为什么不创建一个小表单，因为您在创建频道时可能需要来自用户的数据？
我还没有设置服务器。但我在后端使用快递
不确定我们能否在没有您帮助的情况下为您提供帮助..IE，请为我们提供尽可能多的信息。如果你做不到，这可能意味着你应该花 15 分钟在纸上画出你想要完成的事情

标签： reactjs socket.io

【解决方案1】：

您应该将链接存储在状态中。

export default props => {
  const [rooms, setRooms] = useState([
    {name:"General",src:"/general"},
    {name:"Foobar",src:"/foobar"},
    {name:"Code Chat",src:"/CodeChat"}
  ])
  useEffect(() => {
    join(props.match.params.roomname);
  }, props.match.params);

  return (
    <div className="container">
      <div className="channels">
        rooms.map(room => <Link to={room.src}>{room.name}</Link>)
        <button type="submit">New Rooom</button>
      </div>
      <div>
        <button onClick={logout}>Logout</button>
      </div>
      <Messages room={props.match.params.roomname} />
      <ChatForm room={props.match.params.roomname} />
    </div>
  );
};

然后您可以使用setRooms添加到房间列表

setRooms([...rooms, {name: "New Room", src:"/new"}])

您需要某种形式来从用户那里获取房间名称。

一旦您设置好服务器，您就必须创建某种系统来将其与数据库同步。我建议在 redux 中存储像这样的应用程序范围的数据，然后您可以构建帮助函数来处理查询并将它们与 redux 集成。

【讨论】：