javascript - 在 React 组件中渲染时模态不显示

Question

我想要做什么:当我使用 React 和 Redux 编写项目时，我想在状态发生时从 RecordTaskPopUp 组件弹出一个模式ManageTimer 组件的 isTimeOut 被计时器事件更改(为了可读性，我直接将 isTimeOut 定义为 true 在下面的代码中)。

问题:模态框未显示在页面上。

我为找到问题所做的工作:

1. 我已经更改了 css 文件中的 .modal {display: block}，但它仍然没有显示在页面上。

2. 我还尝试在我的 RecordTskPopUp 组件上渲染除模态之外的其他内容，它工作得很好。所以我认为问题出在模态本身。

3. 从 Bootstrap 文档粘贴 RecordTaskPopUp 的整个渲染片段。

有人可以告诉我这个问题的可能原因是什么吗？非常感谢!

class ManageTimer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isTimeOut: true
    }
  this.closePopUp = this.closePopUp.bind(this);
  }

  closePopUp() {
    this.setState({
    isTimeOut: false
    });
  }

  render() {
    return (
      {this.state.isTimeOut ? 
      <RecordTaskPopUp
        closePopUp={this.closePopUp}/> : 
      <p>There is still time remaining</p> 
      }
    );
  }
}

const RecordTaskPopUp = ({closePopUp}) => {
   return (
      <div className="modal fade">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">Modal Header</h5>
              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true" onClick={closePopUp}>&times;</span>
              </button>
            </div>

            <div className="modal-body">
              <p> Modal Body</p>
            </div>

            <div className="modal-footer">
              <button type="button" className="btn btn-primary">Save changes</button>
              <button type="button" className="btn btn-secondary" data-dismiss="modal" onClick={closePopUp}>Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
   );
};

Answer 1

通用 Bootstrap 模式使用 JavaScript 才能正常工作。然而，它的编码方式是旧式的 dom 渲染，与 React 的方式完全不同。您将必须找到一个为 React 构建的自定义模式组件。我目前使用“React Bootstrap”。如果您尝试使用官方 Bootstrap 源代码提供的模式，您的模式将永远无法工作。