React - 将引用传递给 react-portal 的正确方法 [英] React - Correct way of passing a reference to a react-portal

问题描述

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

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

这是我的应用组件:

class App 扩展组件 {/* 一些代码 */使成为() {返回 (<div className="c-app"><内容/>{/* 我们的内容 */}<叠加/>{/* 我们的通用覆盖 */}{/* 我想要我的 Modal 在这里 */}

)}}

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

<小时>

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

class Card 扩展组件 {构造函数(){极好的();this.state = { showModal: false }}使成为() {const { showModal } = this.state;返回 ({/* 一些代码 */}{显示模态&&ReactDOM.createPortal(<模态>{* ... *}</模态>,文件体)});}}

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

<小时>

问题

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

问题是App 组件和Card 组件相距甚远.将 App 组件的引用传递给所有子组件直到到达 Card 组件，这有点荒谬.

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

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

解决方案

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

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

connect(null, null, null, { withRef: true })(<你的组件>);

并通过以下方法访问引用:

ref={connectedComponent =>这个.<您的组件>=connectedComponent.getWrappedInstance();

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

I have a Card component that needs to trigger a Modal component.

I also have a generic Overlay component that I am using to display some content above my application.

Here is my App component :

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

I want to use my Overlay component with my Modal component. To get it done, I need both components on the same level (siblings).

---

And so I did some research on react-portals and I found that I can do the following in my Card component :

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

In the example above, I am sending the Modal into the body element.

---

Question

How can I get a reference to the App component without sending it through the props?

The thing is that the App component and the Card component are really far apart. It is a little ridiculous to send down the reference of the App component through all the children until it reaches a Card component.

I could also save it it into the Redux Store, but I don't think it is good practice.

How should I fix this? Thanks!

解决方案

Redux offers functionality for passing refs without saving them explicitly in the store.

You can set the withRef option as true in your connect() call:

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

And access the ref by the following method:

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

This medium article may prove helpful. https://itnext.io/advanced-react-redux-techniques-how-to-use-refs-on-connected-components-e27b55c06e34 Also were I got the sample code above from.

这篇关于React - 将引用传递给 react-portal 的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！