リアクションのモーダルをレンダリングする

Question

リアクションモーダルを作成するために、リアクションコンポーネントにonclickメソッドをトラップしようとしています。 私はreact-overlayを依存関係として追加し、それをファイルに追加しました。

import Modal from 'react-overlays'; 

これは、アンカー要素である、

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

これはhandleclick方法、

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

である私は次のエラーを取得する、

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

私は最近、これを持っていましたmodal-compを作成することで回避できます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> 
     ); 
    } 
} 

そして、このようにそれを使用して：

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

が、これは任意の助けであると思います。

Answer 2

あなたの状態には、モーダルを描画することはできますが、モーダル自体は描画できない情報が含まれている必要があります。

コンポーネントを状態で保存するのは非常に普通です。

はこれを試してみてください：

1. ストアモーダルを表示するかどうかを示すために、あなたの状態のフラグ。
2. フラグをhandleClick()に設定します。
3. render()に、フラグが設定されている場合はモーダルを表示します。

例が必要な場合はお知らせください。あなたはhttps://github.com/fckt/react-layer-stackを見て、また

undefinedを..インポートしているよう

Answer 3

が見えます。これは、Reactの "モーダル問題"を解決する普遍的かつクリーンな方法です。デモ - https://fckt.github.io/react-layer-stack/