Question

我有一个 Card 组件，需要触发一个 Modal 组件。

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

这是我的 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 组件一起使用。为此，我需要两个组件都处于同一级别（兄弟姐妹）。

所以我对反应门户进行了一些研究，发现可以在 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 元素中。

问题

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

问题是 App 组件和 Card 组件之间确实相距甚远。通过所有子级发送 App 组件的引用直到到达 Card 组件

，这有点荒谬。

我也可以将其保存到 Redux 商店中，但是我认为这不是一个好习惯。

该如何解决？谢谢！

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 我也是从上面获得了示例代码。

React-将引用传递给React-Portal的正确方法

问题

1 个答案: