Javascript React中的解耦功能

我想弄清楚如何解耦一些React组件——特别是模态——这样打开模态的组件就不需要知道它们是如何打开的

例如，在jQuery中，我可以执行以下操作：

var $modal = $(".modal");
var modals = {};

/* Gets a modal dialog
*/
function _get_modal(modal) {
  if(modals[modal] === undefined) {
    modals[modal] = $(".modal-dialog[data-modal=" + modal + "]");
  }

  return modals[modal];
}

/* Shows the modal page dimmer and the modal dialog
*/
function show_modal(modal) {
  var $m = _get_modal(modal);

  $modal.show();
  $m.show();

  return $m;
}

// Later in a click event listener somewhere...
show_modal("MyModal");

如果我想在React中做同样的事情，我需要将一个函数从父组件传递给所有的子组件和子组件的子组件，以便他们知道如何触发模态

---

理想情况下，我想抽象出我所学到的内容，以便能够实现命令模式。您看过react modal吗。它已经封装了模态。即使您没有使用它，您也可能会知道如何在react中封装东西。注意：命令模式是一种OOP模式，react有一种功能性方法。研究如何更有效地处理事情。HTH

反应模式

没有帮助。在他们的

应用程序中

需要提供打开模式的功能，该功能通过

onClick

道具传递给孩子们。它仍然是耦合的。所有的模态函数在一个组件中是分离的，是的，在某个点上它需要被调用，但我看不出有什么问题。由于React中的所有内容都是一个函数，因此没有任何东西可以阻止您编写一个返回a的函数，但请记住，React遵循的是被动思维（这与jquery不同）。也许你也应该发布你的React代码，我们来看看。