Reagieren - kann ich herausfinden, ob eine Komponente gerade sichtbar ist

Question

Wenn ich react verwende, habe ich Komponenten, die sich auf der Seite ändern, abhängig davon, auf welcher Route der Benutzer navigiert. Gibt es eine Möglichkeit festzustellen, ob eine Komponente gerade angezeigt wird? Wenn sich der Benutzer beispielsweise auf einer Seite befindet, die nicht die Homepage ist, wird die Schaltfläche "Nach Hause gehen" angezeigt, aber ich möchte sie entfernen, wenn der Benutzer zur Startseite zurückkehrt (das ist nicht ganz so einfach, aber das ist es) die allgemeine Idee)

Answer 1

Ich nehme an, Ihre Schaltflächen sind bereits untergeordnete Komponenten, wenn sie Event-Handler übergeben wurden. Vielleicht ist es an der Zeit, sie ein wenig auszufüllen.

class GoHome extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    state = { 
    visible: "shown" 
    } 
    // While the code here would execute just prior to render, 
    // which I assume would happen during page load and after url change, 
    // you could place it in a function the serves as a callback 
    // to any route change event. 
    componentWillMount =() => { 
    // Please check this regex. 
    var re = /\/home/i; 
    if (re.test(window.location.href)) { 
     this.setState({ 
     visible: "not-shown" 
     }); 
    }; 
    } 
    // Using Google's Material Icons as an example. 
    render() { 
    let myClass = "material-icons " + {this.state.visible}; 
    return (
     <i className={myClass}>home</i> 
    ) 
    } 
} 

CSS-Klassen.

Im Wesentlichen unterscheidet sich die CSS-Klasse der Schaltfläche je nach der aktuellen Browser-URL.