javascript - React - 将引用传递给 react-portal 的正确方法

Question

我有一个 Card 组件需要触发一个 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 组件一起使用。为了完成它，我需要两个组件处于同一级别( sibling )。

---

所以我对 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 提供了传递引用的功能，而无需将它们显式保存在商店中。

您可以在 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 我也从中获得了上面的示例代码。