Question

我在ReactJS中使用Bootstrap模式时遇到问题。我的代码渲染console.log函数很好，但它不会显示模态。这是我的代码：

import React from "react";
import ReactDOM from "react-dom";

class ExternalLink extends React.Component {

  renderModal() {
    console.log("the link " + this.props.url + " was clicked.")

    return (
      <div className="modal show">
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLongTitle">Modal 
              title</h5>

              <button type="button" className="close" data-dismiss="modal" 
              aria-label="Close">
              <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              ...
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" data- 
               dismiss="modal">Close</button>
              <button type="button" className="btn btn-primary">Save 
              changes</button>
            </div>
          </div>
        </div>
      </div>,

      document.getElementById("root")
    );
  }

  render() {
    return (
      <div>
        <a onClick={() => this.renderModal()}>{this.props.url}</a>
      </div>
    );
  }
}

export default ExternalLink;

由于Javascript似乎有效，我认为我在Bootstrap领域做错了。提前谢谢！

Answer 1

不是反应如何起作用。您无法从事件处理程序中呈现内容。你所做的是设置一些状态来控制渲染的内容。在您的示例中：

renderModal

您的showModal方法应该只是一个单独的组件。请注意，您必须在模式中将.\vcpkg integrate install设置为false，以便再次隐藏它。

在React中使用Bootstrap Modal

1 个答案: