React：如何通過單擊隱藏組件？

Question

我試圖通過單擊它來隱藏一個 React 組件，但我在網上看到的只是關於按鈕等事件處理程序的解釋。

我正在使用 Next.js （但我認為這些對此意義不大）。

這是我的組件：

import styles from './styles/popup.module.scss';
import React, { Component } from "react";


export default function Popup() {
    return (
        <div className={styles.popup}>
            <div className={styles.popupInner}>
                <h1>Temporary Closure</h1>
                <p>
                    Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that SS will be temporarily closed, effective 23<sup>rd</sup> March 2020
                </p>                    
            </div>
        </div>
    )
}

Answer 1

嘗試在單擊組件時設置 state。 下面的代碼應該可以工作。

import styles from './styles/popup.module.scss';
import React, { Component } from "react";


export default function Popup() {

    const [visible, setVisible] = React.useState(true);

    if(!visible) return null;

    return (
        <div className={styles.popup} onClick={() => setVisible(false)}>
            <div className={styles.popupInner}>
                <h1>Temporary Closure</h1>
                <p>
                    Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that sydney sauna will be temporarily closed, effective 23<sup>rd</sup> March 2020
                </p>
                <div className={styles.buttonContainer}><button className={styles.button}>Okay</button></div>

            </div>
        </div>
    )
}

希望能幫助到你。

Answer 2

您可以使用 state 屬性來告訴您是否應該隱藏組件。 Based on that state, conditionally render another css class to the component you want to hide, using the classnames package (you will need to preinstall it npm install --save classnames )

import React, {useState} from 'react';
import classes from './Component.module.css';
import classNames from 'classnames';

const Component = props => {

    const [show, setShow] = useState(true);

    return (
        <div className={classes.Component} onClick={() => setShow(!show)}>
            <div
                className={classNames( {
                    [classes.Show]: true,
                    [classes.Disappear]: !show
                })}
            >
                {props.children}
            </div>
        </div>
    );
};

export default Component;

在 Disappear css class 中，您可以使用任何您需要的 css 屬性以更優雅的方式使您的組件消失，例如display: none; 或visibility: hidden; （包括過渡）

當然，如果您正在尋找的只是根本不渲染組件，那么其他答案中顯示的標准“將 div 包裝在 if 語句中”是一個完全有效的解決方案。

Answer 3

您需要創建一個 state 變量，該變量將確定是否顯示彈出窗口。 您可以通過使用 useState 鈎子來實現它。

import styles from './styles/popup.module.scss';
import React, { Component , useState } from "react";


export default function Popup() {
 const [isPopupVisible,setPopupVisibility] = useState(true);

    return (
        <div className={styles.popup}>
           { isPopupVisible && (<div className={styles.popupInner}>
                <h1>Temporary Closure</h1>
                <p>
                    Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that SS will be temporarily closed, effective 23<sup>rd</sup> March 2020
                </p>
                <div className={styles.buttonContainer}><button className={styles.button} onClick={setPopupVisibility(false)}>Okay</button></div>

            </div>)}
        </div>
    )
}