ReactModal 버튼을 Href와 함께 사용하면 작동하지 않습니다. 확실하지 않은 이유

나는 반응이 상당히 새롭고 내 개인 사이트를 다시 작성했습니다. 내가 겪고있는 문제는 각 포트폴리오 데모에 대한 JSfiddle 링크 (href 포함)가 작동하지 않는 버튼입니다. 제대로 바인딩하지 않았거나 모달이 열려있을 때와 다른 문제가 정확히 무엇인지 모릅니다. 데모 버튼이 작동하지 않습니다. 닫기 모달 버튼이 제대로 작동합니다. 아래 코드를 참조하십시오.ReactModal 버튼을 Href와 함께 사용하면 작동하지 않습니다. 확실하지 않은 이유

import React from 'react'; 
import ReactModal from 'react-modal'; 

class Project extends React.Component { 
constructor() { 
    super(); 
     this.state = { 
      showModal: false 
    }; 

    this.handleOpenModal = this.handleOpenModal.bind(this); 
    this.handleCloseModal = this.handleCloseModal.bind(this); 
    } 

handleOpenModal() { 
    this.setState({ showModal: true}); 
} 

handleCloseModal() { 
    this.setState({ showModal: false}); 
} 

componentWillMount() { 
    ReactModal.setAppElement('body'); 
} 

render() { 
    const { details } = this.props; 

    return (
     <li className="Project"> 
      <div onClick={this.handleOpenModal}> 
       <img className="Project-image" src={'projects/' + details.image} alt={details.name}/> 
       <div className="Project-overlay"> 
        <p>{details.name}</p> 
       </div> 
      </div> 
      <div > 
       <ReactModal 
        isOpen={this.state.showModal} 
        contentLabel="This is my Modal" 
        shouldCloseOnOverlayClick={true} 
        onRequestClose={this.handleCloseModal} 
       > 
        <div className="modal-header"> 
         <h3>{details.name}</h3> 
        </div> 
        <div className="modal-body"> 
         <img className="Project-image" src={'projects/' + details.image} alt={details.name} /> 
         <p className="desc-body">{details.desc}</p> 
         <p className="desc-body">{details.link}</p> 
        </div> 
        <div className="modal-footer"> 
         { details.havLink && <button className="button" href={details.link}>Click for Demo!</button> } 
         <button className="button" onClick={this.handleCloseModal}>Close Modal</button> 
        </div> 
       </ReactModal> 

      </div> 
      <div className="Project-tag"> 
       <p>{details.tag}</p> 
      </div> 
     </li> 
    ) 
    } 
} 

const props = {}; 

export default Project;

문제는 "모달 바닥 글"클래스의 첫 번째 줄에 있습니다. 이 버튼은 havLink 속성이 true 인 경우 표시됩니다. 이 데이터는 다른 JS 파일에서 내보내집니다. 모든 다른 (이미지, 설명, 모달 제목) 모든 가져 오기 올바르게, 심지어 링크를 가져올 올바르게 설정할 때 단추를 누르면 아무것도 예상대로 발생합니다. React 개발자 도구에서 오류가 보이지 않습니다.

{details.link}는 (는) 지정된 링크로 나를 라우팅하지 않습니다. 링크는 단락 태그에 표시됩니다 (올바른 링크가 채워지는지 확인하기 위해).

다른 것이 필요한 경우 나에게 알려주십시오. 솔루션이 잘못된 바인딩처럼 간단하기를 바랍니다. 미리 감사드립니다.

출처

2017-12-12 SpaghettiBathtub