Javascript React—将引用传递给React门户的正确方式

我有一个卡组件，需要触发一个模态组件

我还有一个通用的覆盖组件，用于显示应用程序上方的某些内容

这是我的应用程序组件：

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>
    )
  }
}

类应用程序扩展组件{
/*一些代码*/
render（）{
返回(
{/*我们的内容*/}
{/*我们的通用覆盖*/}
{/*我想要我的模态在这里*/}
)
}
}

我想将我的叠加组件与我的模态组件一起使用。要完成它，我需要两个组件在同一级别（兄弟）

---

因此，我对react portals进行了一些研究，发现我可以在卡片组件中执行以下操作：

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
          )
      }
    );
  }
}

类卡扩展组件{
构造函数（）{
超级（）；
this.state={showmodel:false}
}
render（）{
const{showmodel}=this.state；
返回(
{/*一些代码*/}
{
showModal
&&ReactDOM.createPortal(
{* ... *},
文件正文
)
}
);
}
}

在上面的示例中，我将模态发送到主体元素中

---

问题: 如何在不通过道具发送的情况下获取对应用程序组件的引用

问题是，应用程序组件和卡片组件之间的距离实在太远了。将应用程序组件的引用发送到所有子组件，直到它到达卡组件，这有点可笑

我也可以将它保存到Redux商店中，但我认为这不是一个好的做法

---

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

Redux提供了传递引用的功能，而无需在存储中显式保存引用

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

connect（null，null，null，{withRef:true}）（）；

并通过以下方法访问ref：

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

ref={connectedComponent=>
这个=
connectedComponent.getWrappedInstance（）；

这篇文章可能会有帮助。

---

我也是从上面的示例代码中获得的。

Hi@Rowan，这很有趣！我在理解这种方法时遇到了一些问题：我的卡组件如何访问应用程序组件的引用？可能我遗漏了一些东西。据我所知，这创建了一个只有连接的组件才能访问的引用OneNet。因此，如果我以这种方式连接应用程序组件，它将有一个自身的引用。然后我可以将其传递给孩子们？卡片组件如何访问此引用？谢谢！：）很抱歉，回复太晚，我在山中，服务不稳定。我相信类似于

App.getWrappedInstance（）。参考['selector']

。虽然通常我会将子对象的引用公开给父对象，但我认为这应该是可行的。

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