React에서 모달 렌더링하기

Question

React 모달을 생성하기 위해 React 구성 요소에 onclick 메서드를 트랩하려고합니다. react-overlay을 종속 파일로 추가하여 내 파일에 추가했습니다. 내가

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

나는 최근에이 다음과 같은 오류했다 얻을

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

import Modal from 'react-overlays'; 

이 앵커 요소입니다, 문제를 해결하고 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/