如何防止重复的模态弹出窗口而不滚动到 ReactJS 中的最后一个元素

Question

我正在创建一个项目，我在其中从服务器获取数据并使用 map() 在 10 不同的 Bootstrap 卡中呈现 10 数据。每张卡片都有一个按钮来弹出模态框。在旁边，我设置了一个 Link 按钮，它将显示该数据的路径。

信息

• 将 react-bootstrap 用于模态 hooks
• 使用 react-router-dom 显示 route
• 使用 useState 钩子将数据从获取的数据设置为模态。
• 所有代码都在一个组件中。
• info_prop & info 是不同的，但它适用于相同的数据。
• 我有 import 所有需要的东西，但没有 warning or error
• 关于数据处理
  • 首先，我使用 chapterId.
  通过 useGetDataQuery() 获取数据
  • 映射数据并解构 info 数据并设置为 setInfo
  状态
  • 使用 info
  发送到模态道具
  • 使用 handleModal 发送至 setInfo 的句柄。我也尝试没有这个功能。那一次我在 onClick.

问题

• map() 的路线问题
  • 我使用 Button 来显示 Modal 并用 Link 包裹按钮。每个 Link 都有一个唯一的 ID，例如 1:1, 1:2, 1:3...1:10。如果我点击 1:1 按钮，它会显示 1:1 的内容。但是当我关闭模态时，路线自动将 1:1 更改为 1:3...1:10.
  • 我意识到它在主 Modal 后面渲染了一个副本 Modal。我只能看到 3-4 行后模态。
• 模态问题
  • 当我用地图显示 1-5 个数据并单击弹出模态按钮时，模态显示正常，背景模糊。
  • 当我用地图dhow 1-10数据&点击popup modal按钮时，背景变成纯黑色。（我觉得不正常）

依赖关系

• react-bootstrapv5
• bootstrap v5
• 反应路由器-dom v6

代码

• 组件代码。 Modal 在同一组件中，但在另一个函数中。

function TafsirModal(props) {
    return (
        <Modal
            {...props}
            size="md"
            aria-labelledby="contained-modal-title-vcenter"
            centered
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Heading
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <div>
                    {props.info}
                </div>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide}>Close</Button>
            </Modal.Footer>
        </Modal>
    )
}

const InfoCom = () => {
    const { chapterId } = useParams()

    let [modalShow, setModalShow] = useState(false);
    let [info, setInfo] = useState('')
    const { data } = useGetDataQuery(chapterId)


    const handleModal = (info_prop) => {
        setInfo(info_prop)
        setModalShow(true)
    }

    return (
        <>
            <div className="container">
                <div className="row">
                    <div className="col-md-12">
                        {data.map(res => (
                            <Link to={`/li/${chapterId}/${res.res_key}`} key={res.res_key} >
                                <div key={res.id} className='card my-2'>
                                    <div className="card-body">
                                        <div className="d-flex flex-row">
                                            <Button onClick={() => handleModal(res.info[0].text)}>
                                                Get Info
                                            </Button>

                                            <TafsirModal
                                                show={modalShow}
                                                onHide={() => setModalShow(false)}
                                                info={info}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </div>
        </>
    )
}
export default InfoCom

Answer 1

问题似乎是您处理显示模态的方式 show={modalShow} 每当你点击一个按钮来显示你的模态时，它们都会显示，因为它们都从 modalShow 中显示了 show modal true。而不是使用 showModal 状态试试这个：

let [activeModal, setActiveModal] = useState('');

function handleModal(info_prop) {
  setInfo(info_prop)
  // if you have an id or something use that instead of text in set activeModal
  setActiveModal(info_prop)
}
// in map
<Button onClick=(() => handleModal(res.info[0].text)></Button>

<TafsirModal
  show={activeModal === res.info[0].text ? true : false}
  onHide=(setActiveModal(''))
/>

我更常用的另一种解决方案是在地图外部向组件的顶层渲染模态，这样您就可以使用与当前相同的逻辑，这样我们只渲染一个模态我认为这会更好并且更易于阅读。 我们可以通过简单地将 <TafsirModal /> 在树

中向上移动几层来做到这一点

<>
            <div className="container">
                <div className="row">
                    <div className="col-md-12">
                        {data.map(res => (
                            <Link to={`/li/${chapterId}/${res.res_key}`} key={res.res_key} >
                                <div key={res.id} className='card my-2'>
                                    <div className="card-body">
                                        <div className="d-flex flex-row">
                                            <Button onClick={() => handleModal(res.info[0].text)}>
                                                Get Info
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
               {activeModal && <TafsirModal
                  show={modalShow}
                  onHide={() => setModalShow(false)}
                  info={info}
                 />
                }
            </div>
        </>