ReactJS: Wie erstelle ich eine transparente Seite?

Question

Ich habe derzeit eine Seite und eine Schaltfläche. Nach dem Klicken auf eine Schaltfläche möchte ich eine Statuseigenschaft aktualisieren. Sobald sie aktualisiert wurde, wird die Komponente neu gerendert und die transparente Seite über der ursprünglichen Seite angezeigt.

möchten so transparent Seite wollen:

Bisher erdacht von so etwas wie:

render() { 
if(this.state.buttonPressed) { 
    return(
    <div style={styles.transparentPage}> 
     //transparentPage content 
    </div> 
) 
} else { 
    return(
    <div style={styles.originalPage}> 
     //originalPage content 
    </div> 
) 
} 

Aber die originalPage vollständig entfernen würde und mit dem transparentPage erneut gerendert werden. Was wäre der richtige Ansatz, um eine transparente Seite über eine Originalseite zu implementieren?

Answer 1

Alles was Sie brauchen würde, ist, etwas zu tun wie

render() { 
    var overlay = this.state.buttonPressed ? <div className="overlay" /> : null; 

    return(
    <div style={styles.originalPage}> 
     {overlay} 
    </div> 
) 
} 

haben und dann in Ihrem CSS tun:

.overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(250,250,250,.5); 
    z-index: 25; 

} 

nur sicherstellen, dass Ihre Z-Index des modalen mehr als die Overlay Z-Index, so dass es auch nicht transparent macht