Question

我需要创建一个在Slack Clone中创建新频道的按钮。我需要一个按钮来显示一个窗口，用户可以在其中输入他们想要的频道的名称，然后在用户按下“提交”后，新的频道就会显示在频道列表中。

我可以在“房间”组件中对频道进行硬编码。但是我不知道如何动态创建新房间。我正在使用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>
  );
};

我希望新会议室在频道列表中创建一个链接。

Answer 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集成。

如何为松弛克隆创建新的频道按钮

1 个答案: