Question

有人可以解释为什么我的惰性加载组件从不加载吗？

所看到的只是消息正在加载...在屏幕上...没有错误。

下面是我的代码：

import React, { Component, lazy, Suspense } from "react";
import "./App.css";
//const Mycomp = lazy(() => import("./components/myComp"));
const Mycomp = lazy(() => {
  let x = new Promise(
    () => {
      import("./components/myComp");
    },
    e => {
      console.log(e);
    }
  );
  return x;
});

class App extends Component {
  sayHi = () => {
    console.log("supa");
  };

  render() {
    return (
      <Suspense fallback={<div> loading...</div>}>
        <div className="App">
          <header className="App-header">
            <Mycomp />
            <input type="button" value="sayHi" onClick={this.sayHi} />
          </header>
        </div>
      </Suspense>
    );
  }
}

export default App;

这仅仅是出于学习目的。.所以请客气..我对一般的反应不是很熟悉。...

下面是myComp.jsx的代码：

import React, { Component } from "react";

class Mycomp extends Component {
  state = {};
  render() {
    return <div>Hi i'm loaded now.</div>;
  }
}

export default Mycomp;

Answer 1

来自React文档。

React.lazy采用必须调用动态import（）的函数。这个必须返回一个Promise，该Promise会解析为具有默认导出功能的模块包含一个React组件。

现在它有些微妙了，但是我认为在您的情况下，您正在返回自己分配给Date的新创建的承诺。但是，您没有指定此诺言要解决的内容。 React需要您返回一个承诺，该承诺会解析为具有默认导出的组件。

我认为您可以对代码进行一些小的更改以使其正常工作。

动态导入已经返回了一个promise，该promise解析为具有默认导出的组件，因此我认为您将其包装在自己的promise中，而您要返回的promise将其丢弃。

这是react文档中的示例。

const Mycomp = lazy(() => {
   return import("./components/myComp");
});

下面是一些示例代码，显示了如何添加超时。

const OtherComponent = React.lazy(() => import('./OtherComponent'));

延迟加载React-组件未加载

1 个答案: