React - 将引用传递给反应门户的正确方法

Question

我有一个卡片组件需要触发一个Modal组件。

我还有一个通用的 Overlay 组件，用于在我的应用程序上方显示一些内容。

这是我的 App 组件：

class App extends Component {
  /* Some Code */
  render() {
    return (
      <div className="c-app">
        <Content /> {/* Our content */}
        <Overlay /> {/* Our all-purpose-overlay */}
        {/* I want my Modal here */}
      </div>
    )
  }
}

我想将我的 Overlay 组件与我的 Modal 组件一起使用。为了完成它，我需要两个组件处于同一级别（兄弟姐妹）。

---

所以我对 react-portals 进行了一些研究，发现我可以在我的 Card 组件中执行以下操作：

class Card extends Component {
  constructor() {
    super();
    this.state = { showModal: false }
  }

  render() {
    const { showModal } = this.state;
    return (
      {/* Some code */}
      {
        showModal 
          && ReactDOM.createPortal(
            <Modal>{* ... *}</Modal>,
            document.body
          )
      }
    );
  }
}

在上面的示例中，我将 Modal 发送到 body 元素中。

---

问题

如何在不通过 props 发送的情况下获得对 App 组件的引用？

问题是 App 组件和 Card 组件相距甚远。将 App 组件的引用向下传递到所有子组件，直到到达 Card 组件，这有点可笑。

我也可以将它保存到 Redux Store，但我认为这不是一个好习惯。

我应该如何解决这个问题？谢谢！

Answer 1

Redux 提供了传递 ref 的功能，而无需将它们显式保存在 store 中。

您可以在 connect() 调用中将 withRef 选项设置为 true：

connect(null, null, null, { withRef: true })(<Your component>);

并通过以下方法访问 ref：

ref={connectedComponent =>
        this.<Your component>=
        connectedComponent.getWrappedInstance();

这篇中等文章可能会有所帮助。 https://itnext.io/advanced-react-redux-techniques-how-to-use-refs-on-connected-components-e27b55c06e34 我也是从上面得到的示例代码。