Rendern eines Modals in React

Question

Ich versuche, eine Onclick-Methode für eine React-Komponente einzufangen, um ein React-Modal zu erstellen. Ich habe react-overlay als Abhängigkeit hinzugefügt und es meiner Datei hinzugefügt.

import Modal from 'react-overlays'; 

Dies ist das Ankerelement,

<a href="#" onClick={this.handleClick} data-id={image.id}> 

Dies ist die handle Methode,

handleClick(event) { 
    event.preventDefault(); 
    let mediaId = event.currentTarget.attributes['data-id'].value; 
    this.setState({ overlay: <Modal show={this.state.showModal} onHide={this.close} mediaId={mediaId}/> }); 
    } 

ich die folgende Fehlermeldung erhalten,

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). 
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.(…) 

Answer 1

ich das vor kurzem hatte Problem und habe es geschafft, indem du einen Modal-comp erstellst onent.

import Modal from 'react-modal' 


export default class CustomModal extends React.Component { 

    constructor() { 
     super(); 
     this.openModal = this.openModal.bind(this); 
     this.closeModal = this.closeModal.bind(this); 
     this.state = { 
      open: false 
     } 
    } 

    openModal() { this.setState(
     {open: true}); 
     $(function(){ 
      $("#custom-modal").appendTo("body"); 
     }); 
    } 

    closeModal() { 

     this.setState({open: false}); 
    } 

    componentDidMount(){ 
     $(function(){ 
      $("#custom-modal").appendTo("body"); 
     }); 
    } 

    render() { 

     return (
      <div> 
       <button onClick={this.openModal}>My modal</button> 
       <Modal id="custom-modal" isOpen={this.state.open} onRequestClose={this.closeModal}> 

        // Modal body content here 

        <button onClick={this.closeModal}>Close</button> 
       </Modal> 
      </div> 
     ); 
    } 
} 

Und dann benutze es wie folgt aus:

import CustomModal from '../components/CustomModal' 
... 
<li><CustomModal/></li> 

Hoffnung diese keine Hilfe ist.

Answer 2

Ihr Status sollte Informationen enthalten, mit denen Sie das Modal, aber nicht das Modal selbst rendern können.

Es ist höchst ungewöhnlich, Komponenten im Zustand zu speichern.

Versuchen Sie folgendes:

1. Shop ein Flag in Ihrem Zustand, um anzuzeigen, ob die modal angezeigt werden soll.
2. Setzen Sie das Flag in handleClick()
3. Rendern Sie in render() das Modal, wenn das Flag festgelegt ist.

Lassen Sie mich wissen, wenn Sie ein Beispiel brauchen.

Answer 3

Sieht aus wie Sie importieren undefined ..

Auch einen Blick auf https://github.com/fckt/react-layer-stack nehmen. Dies ist ein universeller und sauberer Weg, um das "modale Problem" in React zu lösen. Demo - https://fckt.github.io/react-layer-stack/