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

一种解决方案是让 Modal 不使用触发器，而是使用 Modal 的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>
          )
}}