使用带有 Href 的 ReactModal 按钮，不起作用。不确定为什么

Question

我对 React 还很陌生，并且在 React 中重做了我的个人网站。我运行遇到的问题是我的每个投资组合演示的 links（带 href）到我的 JSfiddle 的按钮不起作用。我不确定我是否没有正确绑定，或者除了模式打开时问题究竟是什么，演示按钮不起作用。关闭模式按钮工作正常。请看下面的代码。

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;

问题出在 "modal-footer" class 的第一行。如果 havLink 属性为真，此按钮将显示。此数据是从另一个 JS 文件导出的。其他所有内容（图像、描述、模式标题）都正确导入，甚至我设置的 link 也正确导入，但是当按下按钮时，没有像我预期的那样触发。我也没有在我的 React 开发工具中看到任何错误。

{details.link} 因为 href 没有将我路由到指定的 link。 link 将显示在段落标记中（只是为了查看 link 是否填充正确）。

如果还需要其他任何东西，请告诉我，我希望解决方案与不正确的绑定一样简单。提前致谢！

Answer 1

<button> 没有 href 属性。您应该使用锚元素 <a>。您可以将任何 class 或 style 传递给锚点，使其看起来像一个按钮，但它仍然是一个锚点元素，而不是按钮。

使用带有 Href 的 ReactModal 按钮，不起作用。不确定为什么

Using ReactModal button with Href, not working. Unsure why

javascript

reactjs

react-modal