Как визуализировать узлы, использующие один и тот же триггер?

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

Одним из решений было бы позволить Модалу не использовать триггер, а контролировать его видимость, используя Модал open имущество:

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

При нажатии на выпадающий элемент, вы должны установить this.state.isOpen = true и модальное будет показано.

Answer 2

Я верю, что вы можете поместить одно в другое. В этом случае это было бы

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>
          )
}}