同じトリガを共有するノードをレンダリングする方法は？

Question

私のユースケースは、以下の例で簡略化したものです。同じトリガーを共有するコンポーネントをレンダリングする方法は？

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

私はあなたが他を内側に置くことができると信じています。あなたは、ドロップダウン項目をクリックすると

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

：このインスタンスでは、それは

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

一つの解決策は、モーダルトリガを使用しないようにするだろうだろうが、むしろそれは視界モーダルのopenプロパティを使用してのコントロール'dがthis.state.isOpen = trueに設定され、モーダルが表示されます。