ReactJS模态组件不会在单击时关闭

是因为它没有内置的单击关闭功能。通常情况下，模态组件在用户点击模态框以外的区域时会关闭。但是，如果需要在单击时关闭模态组件，可以通过以下步骤来实现：

定义一个状态变量isModalOpen，用于控制模态组件的显示和隐藏状态。初始状态为false，表示模态组件默认隐藏。
在触发打开模态组件的事件处理函数中，将isModalOpen的值设为true，使得模态组件显示出来。
在模态组件的渲染部分，添加一个透明的背景层，并在点击背景层时触发关闭模态组件的事件处理函数。
定义一个关闭模态组件的事件处理函数，将isModalOpen的值设为false，使得模态组件隐藏起来。

下面是一个示例代码：

import React, { useState } from 'react';

const ModalComponent = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>打开模态框</button>

      {isModalOpen && (
        <div className="modal">
          <div className="modal-content">
            <h2>模态框内容</h2>
            <p>这是一个模态框示例。</p>
          </div>
          <div className="modal-background" onClick={closeModal}></div>
        </div>
      )}
    </div>
  );
};

export default ModalComponent;

在上述示例中，点击"打开模态框"按钮会调用openModal函数，将isModalOpen的值设为true，从而显示模态框。模态框内部包含一个透明的背景层，当点击背景层时会调用closeModal函数，将isModalOpen的值设为false，从而隐藏模态框。

注意：上述代码仅为示例，模态框的样式需要根据实际情况进行自定义。