我正在为我的应用程序使用 bootstrap flex。在我的页面上有三个反应组件
- 导航栏
- 用户列表
- 与用户聊天
因此，我将 d-none 设置为 md 和 sm screen 中的第三个组件。在小屏幕上只有 1 和 2 可见。它工作正常。但是在小屏幕上，当用户单击用户名（来自组件 2 的用户列表）并且用户的时间列表可能会隐藏时，我想显示与用户的聊天（sm 默认为 d-none）。那么我怎么能用 bootstrap 做到这一点。简单地说，我想制作像 Twitter 消息页面这样的 UI，它隐藏用户列表和聊天 onClick 事件。
<div classname="container">
<div classname="row pt-2 pb-4">
<Navbar />
{/*//TODO: Message Component*/}
<div classname="main-content-container col-10 col-md-4 col-lg-4">
<div classname="titleContainer">
<h1 classname="fw-bold ">Messages</h1>
</div>
{conversation.map((c,index) => {
return (
<div onClick={() => setCurrentChat(c._id)
} key={index}>
<Conversation conversation={c} />
</div>
);
})}
</div>
{/*//TODO: Chat Component*/}
<div
classname="d-none d-md-block col-md-6 col-md-2 col-lg-6 chatBox"
id="chatbox"
>
<div classname="titleContainer">
<h1 classname="fw-blod">Inbox</h1>
</div>
<div classname="chatBoxWrapper">
<div classname="chatBoxTop">
{currentChat ? (
<>
{messages &&
messages.map((m,index) => (
<div ref={scrollRef} key={index}>
<Chat message={m} own={m.sender === user._id} />
</div>
))}
<div classname="chatBoxBottom">
<textarea
classname="chatMessageInput "
placeholder="write something..."
cols={40}
onChange={(e) => setNewMessage(e.target.value)}
value={newMessage}
required
></textarea>
<button
type="submit"
onClick={handleSubmit}
classname="chatSubmitButton"
>
Send
</button>
</div>
</>
) : (
<>
<div classname="fw-bold inbox">
You dont have a message selected Choose one from your
existing messages,or start a new one.
</div>
</>
)}
</div>
</div>
</div>
</div>
</div>
);