Reagieren js: Öffnen Sie gleichen modal aus verschiedenen Komponenten

Ich öffnen möchte Modal, sagen Sie 'modal für login', aus den verschiedenen Komponenten in meiner app Reagieren. Für ex: ich will das modale öffnen von A.js, B.js und C.js. Also habe ich eine neue Komponente ModalWindow.js enthält die modalen und ich importierte es in A.js, B.js und C.js.

Nun das Problem ist, dass ich Zustand zu halten showModal: false in allen 3 Komponenten für die Modale zum ein - /ausblenden. Gibt es trotzdem, ich habe die Verwaltung eines einzigen Staates.

Eine Möglichkeit ist, dass ich den Status beizubehalten, in der übergeordneten Komponente. Aber gibt es eine bessere Art und Weise möglich?

X.js

import A from 'A.js'
import B from 'B.js'
import C from 'C.js'

class X extends Component {
  return(
    render{
      <div>
        <A />
        <B />
        <C />
      </div>
    }
  )
}

export default X

A.js

import ModalWindow from 'ModalWindow.js'

class A extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  return(
    render{
      <ModalWindow show={this.state.showModal} container={this}/>
    }
  )
}

export default A

B.js

import ModalWindow from 'ModalWindow.js'

class B extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  return(
    render{
      <ModalWindow show={this.state.showModal} container={this}/>
    }
  )
}

export default B

C.js

import ModalWindow from 'ModalWindow.js'

class C extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  return(
    render{
      <ModalWindow show={this.state.showModal} container={this}/>
    }
  )
}

export default C

ModalWindow.js

import Modal from 'Bootstrap/Modal'

class ModalWindow extends Component {
  return(
    render{
      <Modal
      show={this.props.showModal}
      container={this.props.container}
      bsSize='small'
    >
      <Modal.Header closeButton="true">
        <Modal.Title id="contained-modal-title">
          Login
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        Login Here
      </Modal.Body>
    </Modal>
    }
  )
}

export default ModalWindow
  • Wenn Sie mit Redux können Sie halten den Zustand in einem Redux speichern und dann dispatch-Maßnahmen im untergeordneten Komponenten zu zeigen - aber ich würde nicht empfehlen, die Umsetzung wiedermal nur für diesen Zweck.
  • Ich benutze redux schon.
  • Auch einen gemeinsamen Ansatz, den ich nehmen ist, um einen "Anzeige" - reducer, die behandelt verschiedene Zustände anzeigen. Dann habe ich eine Aktion die in einer Nachricht, dass zeigt die modale mit der Nachricht. Dann in der modal-selbst ich könnte einen button, onClick, feuert eine Aktion, hinter der sich die modal.
InformationsquelleAutor iamsaksham | 2016-09-28
  1. 2

    Empfehle ich den Ansatz, dass Dan Abramov beschrieben in Wie kann ich die Anzeige eines modalen Dialoges in Redux führt, dass die asynchronen Aktionen? . Grundsätzlich ist eine zentrale Komponente, die verantwortlich für die Anzeige modals und Versand-Aktionen, geben Sie den Namen des modal zu öffnen und alle Werte weitergeben als Requisiten.

    InformationsquelleAutor markerikson
  2. 2

    Können Sie die state innerhalb der modalen und setzen Sie zwei Funktionen zum öffnen/schließen-modal, die den Zustand ändern. Diese Funktionen kann zugegriffen werden über refs in anderen Komponenten.Siehe das Beispiel unten.

    ModalWindow.js

    import Modal from 'Bootstrap/Modal'

class ModalWindow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    }
  }
  show() {
    this.setState({
      showModal: true,
    })
  }
  hide() {
    this.setState({
      showModal: true,
    })
  }
  render() {
    return <Modal
    show={this.state.showModal}
    container={this.props.container}
    bsSize='small'>
      < Modal.Header closeButton = "true" >
      < Modal.Title id = "contained-modal-title" >
      Login < /Modal.Title> < /Modal.Header> < Modal.Body >
      Login Here < /Modal.Body> < /Modal>
  }
}

export default ModalWindow

    A. js, B. js, C. js

    import ModalWindow from 'ModalWindow.js'

class A extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.refs.modal.show() //to show the modal
    this.refs.modal.hide() //to hide the modal
  }
  render() {
    return <ModalWindow container={this} ref = "modal" / >
  }
}

export default A
    InformationsquelleAutor Pranesh Ravi
Schreibe einen Kommentar