React einzelne Popover-Komponente

Question

In meiner App habe ich viele Tasten. Wenn Sie auf eine der Schaltflächen klicken, wird ein Popover mit einigen Steuerelementen (also Ereignissen) geöffnet.

Ursprünglich wollte ich eine Popover-Komponente in jede Button-Komponente einfügen, aber ich brauche sie nicht wirklich, weil in jedem Moment nur ein Popover angezeigt wird.

Und ich bin wirklich fest, wie es geht. Wie kann ich mit dem Anzeigen und Schließen von Popover umgehen? Wo soll ich es hinstellen?

p.s. Ich verwende ReactJS teilweise im Projekt.

Answer 1

Sie könnten eine übergeordnete Komponente erstellen, die das Popover und alle Schaltflächen enthält. Die übergeordnete Komponente hat den Status, der die Anzeigeeigenschaft des Popover angibt.

class Parent extends Component { 
    constructor() { 
    this.state = { displayPopover: false }; 

    this.togglePopover = this.togglePopover.bind(this); 
    } 

    togglePopover() { 
    this.setState({ displayPopover: !this.state.displayPopover }); 
    } 

    render() { 
    return (
     <div> 
     <div style={{ display: this.state.displayPopover ? 'block' : 'none' }} /> 
     <button onClick={this.togglePopover}>Toggle 1</button> 
     <button onClick={this.togglePopover}>Toggle 2</button> 
     </div> 
    ); 
    } 
}