Question

我正在与Gatsby一起使用react-loadable，并且对加载组件及其运行有疑问。

看来我已经正确设置了所有内容，因为只有在单击按钮并在开发工具中对此进行验证后，我才能成功加载模式组件。但是，我无法在可加载组件完全呈现之前让加载组件显示。这是到目前为止我正在做的一个例子：


function Loading() {
  return (
    <h1>
      Loading...
    </h1>
  );
}

const LoadableVideo = Loadable({
  loader: () => import("../Video/Video"),
  loading: Loading,
  delay: 0
});


export default props => {
  const [modalOpen, setModalOpen] = useState(false);

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

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

  return (
    <div>
      <WatchContainer onClick={openModal}>
        <VideoLink>Watch the film</VideoLink>
        <PlayButton />
      </WatchContainer>

      {modalOpen ? (
        <ModalContainer show={modalOpen} closeModalCallback={closeModal}>
          <div style={{ width: "80%", backgroundColor: "gainsboro" }}>
            <LoadableVideo />
          </div>
        </ModalContainer>
      ) : null}
    </div>
  );
};

我对为什么可以成功加载拆分的Video组件却却从未看到“ Loading”组件感到有些困惑。我什至尝试将延迟设置为0，如上所示。这是由于与盖茨比和SSR相关的事情吗？有什么想法吗？

谢谢！

用GatsbyJS反应加载

0 个答案: