我在 jsx 中使用三元運算子來顯示我的任何組件。問題是，當我按下其中一個按鈕并將狀態 showChat 設定為“真”時，它不會顯示我的組件“聊天”。我的三元狀態似乎很好，所以我不明白為什么會出現這個問題。知道如何解決這個問題嗎？
謝謝 ：）
const Chatroom = () => {
... other states ...
const [showChat, setShowChat] = useState(false);
const [showRoomList, setShowRoomList] = useState(false);
const createRoom = () => {
if (username !== "" && room !== "") {
socket.emit("join_room", room);
setShowChat(true);
}
}
const listeRoom = () => {
if (username !== "") {
socket.emit("room_list", 'roomList');
setShowRoomList(true);
}
}
...
return (
<>
<CssBaseline/>
<main>
<div className={classes.container}>
<Container maxWidth="md">
{!showChat || !showRoomList ? (
<Button onClick={createRoom} disabled={disable} color='primary' variant="contained"> Créer une room </Button>
<Button onClick={listeRoom} disabled={enable} color='primary' variant="outlined"> Liste des rooms </Button>
)
: showRoomList ? (
<ListeRooms socket={socket} username={username}/>
)
:(
<Chat socket={socket} username={username} room={room}/>
)}
</Container>
</div>
</main>
</>
)
}
export default Chatroom;
uj5u.com熱心網友回復：
我不推薦這種條件渲染方式，因為您可以看到它很棘手。可能你在這里弄錯了
{!showChat || !showRoomList ? ( -> {!showChat && !showRoomList
我建議你這樣做
<Container maxWidth="md">
{!showChat && !showRoomList && (<Button onClick={createRoom}..../>....)}
{showRoomList && <ListeRooms socket=..../>}
{showChat && <Chat.../>}
</Container>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/432121.html
上一篇：從剛剛完成的請求中讀取資料