當用戶進入頁面時顯示一個彈出窗口

Question

當用戶進入某個網頁時，我想顯示一些免責聲明。 我目前正在使用 window.addEventListener 加載，但這僅在頁面上刷新網站時顯示彈出窗口。

import React, { Component } from 'react';
import DisclaimerPopup from "./DisclaimerPopup";

export class LearnTheBasics extends Component {
    static displayName = LearnTheBasics.name;

    constructor(props) {
        super(props);
        this.state = {
            ShowDisclaimerPopup: false,
            profileData: [],
            error: null
        };
    }

    toggleDisclaimerPopup() {
        this.setState({
            showDisclaimerPopup: !this.state.showDisclaimerPopup
        });
    }
       
    componentDidMount() {
        window.addEventListener('load', this.toggleDisclaimerPopup.bind(this))
    }
    render() {

        return (
            <div>
                {this.state.showDisclaimerPopup ?
                    <DisclaimerPopup
                        closePopup={this.toggleDisclaimerPopup.bind(this)}
                    /> : null
                }
                
                <h1>Learn The Basics</h1>
                <br />
                <h3> Add pop up disclaimer</h3>

                <p>ADD list here of different basics hacks to learn. (css, SQLi etc)</p>
                
                
            </div>
        );
    }
}

這是頁面的代碼。 DisclaimerPopup 只是顯示的內容。 我確實修改了 useEffect 和 useState 但我無法讓它工作。

將代碼更新為 useEffect

import React, { useEffect, useState, Component } from 'react';
import DisclaimerPopup from "./DisclaimerPopup";

export class LearnTheBasics extends Component {
    static displayName = LearnTheBasics.name;

    constructor(props) {
        super(props);
        this.state = {
            ShowDisclaimerPopup: false,
            profileData: [],
            error: null       
        };
    }

    toggleDisclaimerPopup() {
        this.setState({
            showDisclaimerPopup: !this.state.showDisclaimerPopup
        });
    }

        
    render() {
        function LearnTheBasics() {
            let [setPopup] = React.useState(false);

            useEffect(() => {
                setPopup(true);
            }, [])
        }
        return (
            <div>
                {this.state.showDisclaimerPopup ?
                    <DisclaimerPopup
                        closePopup={this.toggleDisclaimerPopup.bind(this)}
                    /> : null
                }
                
                <h1>Learn The Basics</h1>
                <br />
                <h3> Add pop up disclaimer</h3>

                <p>ADD list here of different basics hacks to learn. (css, SQLi etc)</p>
                
                
            </div>
        );
    }

Answer 1

當您使用基於類的組件時，您可以使用withRouter HOC 並將子組件包裝在其中。 這將允許您訪問this.props.location.pathname ，現在在您的componentDidMount() function 中，檢查您正在尋找的確切路徑名，並將本地 state 設置為 true，如果它匹配並因此呈現免責聲明彈出。

您可以在此處閱讀有關withRouter更多信息

Answer 2

將彈出窗口設為有狀態並使用 useEffect。 我已將 deps 數組設置為空，以便免責聲明第一次彈出，用戶進入頁面。

function LearnTheBasics() {
    let [popup, setPopup] = React.useState(false);

    useEffect(() => {
        setPopup(true);
    }, [])

    return (
      <div>
        {popup ? 'popup called': 'dont call the method'}
      </div>
    )
}