Wie rendern Knoten, die den gleichen Trigger teilen?

Question

Mein Anwendungsfall ist eine Art von was ich im folgenden Beispiel vereinfacht habe. Wie werden Komponenten gerendert, die denselben Trigger verwenden?

class SomeComponent extends Component { 

    render() { 
     let dropDownItem = <DropDown.Item> An Item! </DropDown.Item> 

     let modal = <Modal trigger={dropDownItem}></Modal> 

     let popup = <Popup trigger={dropDownItem}></Popup> 

     return(
        <DropDown.Menu> 
         {modal} or {popup} 
        // How to share same trigger among multiple components. 
        <DropDown.Menu> 
      ) 
    } 
} 

Answer 1

Ich glaube, Sie können einen in den anderen platzieren. In diesem Fall würde es

class SomeComponent extends Component { 

render() { 
    let dropDownItem = <DropDown.Item> An Item! </DropDown.Item> 

    let modal = <Modal trigger={dropDownItem}></Modal> 

    let popup = <Popup trigger={modal}></Popup> 

    return(
       <DropDown.Menu> 
       {popup} 
       <DropDown.Menu> 
     ) 
}} 

Answer 2

Eine Lösung wäre zu lassen, nicht Modal einen Trigger verwenden, sondern steuert sie die Sichtbarkeit open Eigenschaft Modal die Verwendung:

<Modal open={this.state.isOpen}>Content</Modal> 

auf das Dropdown-Element klicken Sie 'd set this.state.isOpen = true und das modale würde angezeigt werden.