React - 在 bootstrap 模式完全呈现并可见后执行 javascript

Question

我正在开发一个使用 Reactstrap 的 React 前端，我正在其中创建我自己的可重用模态组件。每当模态的内容太多时，它就会变成可滚动的，为了让用户清楚，我在模态的底部创建了一个指示器。 (example screenshot)

滚动时指示器停留在模式底部，当用户到达末尾时我让它消失（检查下面代码中的 onscroll 事件和 moreContent 状态）。

到目前为止一切顺利，但我的问题是我无法找到一种方法来检查我最初是否必须在呈现模态时显示指示器。现在 moreContent 状态最初设置为 true，但这应该取决于模态是否可滚动。

我试过了：

找到一个像 onScroll 这样的事件，它在呈现模态时触发，这样我就可以检查是否 event.target.scrollHeight == event.target.clientHeight
useEffect 挂钩，引用模式。这触发得太快了，因为 scrollHeight 和 clientHeight 仍然是 0。

我的模态组件的代码：

    import React, {useEffect, useState} from 'react';
    import {Button, Modal, ModalBody, ModalHeader} from "reactstrap";
    
    const MyModal = (props) => {
        const [moreContent, setMoreContent] = useState(true);
        const ref = React.useRef();
    
        useEffect(() => {
            console.log("scrollHeight", ref.current._element.scrollHeight);
            console.log("scrollTop", ref.current._element.scrollTop);
            console.log("clientHeight", ref.current._element.clientHeight);
        });
    
        const onScroll = (event) => {
            if (moreContent) {
                setMoreContent(event.target.scrollHeight - event.target.scrollTop !== event.target.clientHeight);
            }
        }
    
        return (
            <Modal isOpen={props.isOpen} toggle={props.closeHandler} centered={true} scrollable={true} className="my-modal" onScroll={onScroll} ref={ref}>
                <ModalHeader tag="div" toggle={props.closeHandler}>
                    ...
                </ModalHeader>
                <ModalBody>
                    {props.children}
                    {moreContent &&
                        <div className="modal-scroll-down">
                            <i className="fa fa-arrow-down mr-4"></i> MEER <i className="fa fa-arrow-down ml-4"></i>
                        </div>
                    }
                </ModalBody>
            </Modal>
        )
    };
    
    MyModal.defaultProps = {
        showCloseButton : true
    }
    
    export default MyModal;

欢迎任何提示、建议和解决方法。

提前致谢！

Answer 1

这里的问题是您将 ref 附加到 Modal 而不是 DOM 元素，因此不会具有这些属性 scrollHeight、scrollTop，和 clientHeight。此外，即使它是 DOM 元素，它也不是带有滚动条的元素——它实际上是 ModalBody。但是，更糟糕的是，看起来 Reactstrap 并没有真正为您将 forwarded ref 附加到 ModalBody.

公开道具

要解决此问题，您可以将 ModalBody 替换为 div - 这是我们可以附加 ref 的地方。

<Modal
  isOpen={props.isOpen}
  toggle={props.closeHandler}
  centered={true}
  scrollable={true}
  className="my-modal"
  onScroll={onScroll}
  onOpened={onOpened}
>
  <ModalHeader tag="div" toggle={props.closeHandler}>
    modal header
  </ModalHeader>

  <div ref={ref} style={{ overflowY: "auto", padding: "16px" }}>
    {props.children}
    {moreContent && (
      <div className="modal-scroll-down">
        <i className="fa fa-arrow-down mr-4"></i> MEER{" "}
        <i className="fa fa-arrow-down ml-4"></i>
      </div>
    )}
  </div>
</Modal>

注意我附在 <Modal> 上的 onOpened 道具，这回答了你的问题：

execute javascript after bootstrap modal is completely rendered and visible

const onOpened = () => {
  setMoreContent(
    ref.current.scrollHeight - ref.current.scrollTop !==
      ref.current.clientHeight
  );
};

React - 在 bootstrap 模式完全呈现并可见后执行 javascript

React - execute javascript after bootstrap modal is completely rendered and visible

reactjs

reactstrap