Реагируйте: Как вызвать модальный, если компоненты не связаны

Question

Я пытаюсь запустить модальный режим, однако при текущей настройке компоненты не имеют отношения родитель-потомок и совершенно не связаны между собой. Есть какой-либо способ сделать это? Я знаю, что в идеале они должны быть настроены как родитель-потомок, но эта ситуация требует, чтобы они не были связаны. Мне нужны две кнопки в App.js, чтобы можно было запускать модал, точно так же, как кнопки в Modal.js уже могут. Любая помощь или мысли будут оценены.

App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import InputComponent from './components/input_component';
import Modal from './components/modal';


class App extends Component {

  constructor(props){
    super(props);
  }

  componentDidMount(){
    this.refs.modal.showFunction();
    this.refs.modal.hideFunction();
  }

  state = {
    fields: {},
  };

  onChange = updatedValue => {
    this.setState({
      fields: {
        ...this.state.fields,
        ...updatedValue,
      }
    });
};
  render() {
    return (
      <div> 
        <InputComponent onChange={fields => this.onChange(fields)}/>
        <p>{JSON.stringify(this.state.fields)}</p>
        <Modal container={this} ref="modal" />
        <button onClick={this.showFunction}>click to trigger show modal from App</button>
        <button onClick={this.hideFunction}>click to trigger hide modal from App</button>
      </div>
    );
  }
}

export default App;

Modal.js:

import React from 'react';

import '../styles/styles.css';

export default class Modal extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      show: false,
    }
    this.showFunction = this.showFunction.bind(this);
    this.hideFunction = this.hideFunction.bind(this);
  }

  showFunction(){
    this.setState({
      show: true,
    })
  }

  hideFunction(){
    this.setState({
      show: false,
    })
  }

  render(){ 
    if(!this.state.show){
      return <button onClick={this.showFunction}>showModal</button>
    }
    return(
        <div className="modal-styles">
          <Modal show={this.state.show} container={this.props.container}>
            <h2>This will be the Modal</h2>
          </Modal>
          <button onClick={this.hideFunction}>hideModal</button>
        </div>
      );
  }
}

Answer 1

Если два компонента приходят из двух совершенно разных мест, это может быть случай, когда наиболее целесообразно просто использовать переменную window. Обратите внимание, что синтаксис /* GLOBAL window.etc */ здесь не для ESLint, просто для ясности.

App.js

/* GLOBAL window.__showModal */
/* GLOBAL window.__hideModal */

// class App...

  showFunction() {
    if (window.__showModal) {
      window.__showModal();
    } else {
      // Handle errors: Other component has not mounted
    }
  }

  hideFunction() {
    if (window.__hideModal) {
      window.__hideModal();
    } else {
      // Handle errors: Other component has not mounted
    }
  }

Modal.js

/* GLOBAL window.__showModal */
/* GLOBAL window.__hideModal */

// class Modal...

  componentDidMount() {
    window.__showModal = () => this.showFunction()
    window.__hideModal = () => this.hideFunction()
  }

  componentDidUnmount() {
    // Kill references to 'this'
    window.__showModal = undefined
    window.__hideModal = undefined
  }