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

Question

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

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

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

我试过了：

• 查找类似 onScroll 的事件，该事件在呈现 Modal 时触发，以便我可以检查 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 附加到不是DOM 元素的Modal，因此不会有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 道具，这回答了你所寻求的：

在引导模式完全呈现后执行 javascript 并且 可见

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