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

尝试设置单击组件时的状态。下面的代码应该可以工作。

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

您需要创建一个状态变量来确定是否显示弹出窗口。您可以使用 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>
    )
}

Answer 3

您可以使用一个状态属性来告诉您是否应该隐藏该组件。基于该状态，有条件地渲染另一个 css class 到你想要隐藏的组件，使用 classnames 包（你需要预安装它 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;（包括转换）

当然，如果您正在寻找的只是根本不渲染组件，那么其他答案中显示的标准 "wrapping the div in an if statement" 是一个完全有效的解决方案。

React：如何通过单击隐藏组件？

React: How to hide a component by clicking on it?

javascript

components

event-handling

reactjs