Question

我有一个相当复杂的应用程序，主要布局组件，几个不同的页面，每个页面都有自己的专用组件。我希望能够从任何地方调用<Modal />组件。

目前，我的解决方案可能不是那么热门。我在最顶层的<Modal />组件中有一个Layout。所以布局是通过每个组件向下发送模态道具（可见，消息，按钮），以便任何页面或组件都可以触发模态。虽然感觉有点不对劲。

还有其他方法吗？也许我可以以某种方式使用React.cloneElement，传递一些道具（包括回调来处理按钮点击）？或者我在每个需要调用一个页面或组件的组件上只有一个隐藏的<Modal />？

Answer 1

您应该为此投资Flux架构。然后，您可以从任何地方触发操作，并通过商店中的属性弹出模式。

下面的一些伪代码

class Store {

   constructor() {
     this.registerAction('showModal', setModalVisibility);
   }
   setModalVisiblity(showModal) {
      this.setState({showModal: showModal});
   }
}

class Action {
    showModal(showModal) {
       return showModal;
    }
}

class MyOtherComponent {
   render() {
     return (<div onClick={someFluxInstance.getActions().showModal}>Click</div>
   }
}

class Layout {
  render() {
    if(this.props.showModal) {
      <Modal />
    }
  }
}

React - 如何制作一个我可以从任何地方调用的模态组件？

1 个答案: