semantic-ui-react - 同じトリガーを共有するノードをレンダリングする方法は?

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

1 つの解決策は、モーダルにトリガーを使用させずに、モーダルのopenプロパティを使用して可視性を制御することです。

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

ドロップダウン項目をクリックすると、設定さthis.state.isOpen = trueれ、モーダルが表示されます。