React - правильный способ передачи ссылки на реагирующий портал

Question

У меня есть компонент Card, который должен вызвать модальный компонент.

У меня также есть общий компонент Overlay, который я использую для отображения некоторого контента над моим приложением.

Вот мой компонент приложения:

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 с моим модальным компонентом. Чтобы сделать это, мне нужны оба компонента на одном уровне (братья и сестры).

---

И поэтому я провел некоторое исследование по реагирующим порталам и обнаружил, что могу сделать следующее в своем компоненте 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
          )
      }
    );
  }
}

В приведенном выше примере я посылаю модал в элемент body.

---

Вопрос

Как я могу получить ссылку на компонент приложения, не отправляя его через реквизит?

Дело в том, что компонент App и компонент Card действительно находятся далеко друг от друга. Немного смешно посылать ссылку на компонент приложения через все дочерние элементы, пока он не достигнет компонента карты.

Я мог бы также сохранить его в Redux Store, но я не думаю, что это хорошая практика.

Как мне это исправить? Спасибо!

Answer 1

Redux предлагает функциональность для передачи ссылок без явного сохранения их в магазине.

Вы можете установить опцию withRef как true в вашем вызове connect():

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

И получить доступ к ссылке следующим способом:

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

Эта средняя статья может оказаться полезной. https://itnext.io/advanced-react-redux-techniques-how-to-use-refs-on-connected-components-e27b55c06e34 Также я получил пример кода выше от.