react-router-dom 链接点击关闭引导模式窗口

Question

我需要通过单击链接关闭模式窗口。我的模态窗口：

export const ModalWrapper = (props) => {
  const { children, title, modalName } = props;
  return (
    <div
      className="modal fade"
      id={`modal-${modalName}`}
      tabIndex="-1"
      role="dialog"
      aria-labelledby="modal-label"
      aria-hidden="true"
      style={{ display: 'none' }}
    >
      <div className="modal-dialog modal">
        <div className="modal-content" style={{ overflow: 'hidden' }}>
          <div className="modal-header">
            { title }
            <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>

          </div>
          <div className="modal-body" style={{ maxHeight: '435', overflowY: 'auto' }}>
            <ul className="list-unstyled todo-list">
              {children}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

如何使用 react-router-dom 链接关闭窗口？

它关闭窗口而不重定向：

<Link to="/registration" data-dismiss="modal" className="btn btn-default">Registration</Link>

它重定向但窗口没有关闭：

<Link to="/registration" className="btn btn-default">Registration</Link>

谢谢！

Answer 1

要实现您的目标，您可以：

• 使用第三方库（例如React-Bootstrap）；
• 坚持原生代码；

您可以在他们的网站上阅读有关 React Bootstrap 库的更多信息。

如果你想避免额外的依赖，你可以使用 React 的 ref 功能：https://reactjs.org/docs/refs-and-the-dom.html 并使用它来操作 dom（例如，在链接单击或任何其他操作时隐藏对话框）。在这种情况下，只需将 ref 回调函数附加到对话框 dom 元素：

<div className="modal" ref={(input) => {this.input = input}}>
...

在这种情况下，您可以访问 dom 的 className 并从中删除 show 类。请注意，您还必须从淡入淡出容器中删除 show（由 Bootstrap 生成的暗色背景）。

我的总体建议是使用隐藏当前模式和淡出的实用功能。喜欢：

const hideActiveModal = () => {
  const modal = document.getElementsByClassName('modal show')[0];
  const fade = document.getElementsByClassName('modal-backdrop show')[0];
  modal.className = modal.className.replace('show', '');
  fade.className = fade.className.replace('show', '');
};

---

结论：您目前无法使用 clear React 隐藏 Bootstrap。要么使用 React-Bootstrap 要么使用 util 函数（就像我提供的那样）。