jsx 中的三元运算符中的多个条件我的组件未显示

Question

我在 jsx 中使用三元运算符来显示我的任何组件。问题是，当我按下其中一个按钮并将我的状态 showChat 设置为 'true' 时，它不会显示我的组件“聊天”。我的三元条件似乎很好，所以我不明白为什么会出现这个问题。知道我该如何解决这个问题吗？

谢谢:)


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;

Answer 1

我不推荐这种条件渲染方式，因为如您所见，它很棘手。可能你在这里弄错了

 {!showChat || !showRoomList ? ( ->  {!showChat && !showRoomList

我建议你这样做

<Container maxWidth="md">
  {!showChat && !showRoomList && (<Button onClick={createRoom}..../>....)}
  {showRoomList && <ListeRooms socket=..../>}
  {showChat && <Chat.../>}
</Container>

jsx 中的三元运算符中的多个条件我的组件未显示

Multiple condition in ternary operator in jsx my component not showing

jsx

reactjs