React.lazy & Suspence, Ленивая загрузка компонента - PullRequest
Новая
       6

React.lazy & Suspence, Ленивая загрузка компонента

0 голосов
/ 29 марта 2020

Я пытался создать LL C https://blog.logrocket.com/lazy-loading-components-in-react-16-6-6cea535c0b52/, но в итоге я получил ошибку: 

Objects are not valid as a React child (found: object with keys {$$typeof, _ctor, _status, _result}). If you meant to render a collection of children, use an array instead.

<LazyLoadingComponent resolve={() => import('../StaticComponents/Notification/Notification')}>
</LazyLoadingComponent>

import React, { lazy, Suspense } from 'react';

function LazyLoadingComponent({ resolve }) {
  console.log('resolve', resolve);
  return (
    <Suspense fallback={() => <h1>loading</h1>}>
      {lazy(async () => {
        const { default: module } = await resolve();
        console.log(module, 'module');
        return module;
      })}
    </Suspense>
  );
}

export default LazyLoadingComponent;

Ответы [ 2 ]

0 голосов
/ 29 марта 2020

, что работает, в любом случае, спасибо за помощь! 

<LazyLoadingComponent
  component={lazy(() => import('../StaticComponents/Notification/Notification'))}
 ></LazyLoadingComponent>

    <Suspense fallback={() => <h1>loading</h1>}>
      <Component></Component>
    </Suspense>
0 голосов
/ 29 марта 2020

Попробуйте: 

// App.js
import React, { lazy, Suspense } from "react";
// Import your compnent like so
const LazyComponent = lazy(() => import("./LazyComponent"))

function App() {
  return (
    <div className="App">
      <h1>Testing Lazy component..</h1>
      <Suspense fallback={<h2>See Loading?</h2>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

Ваш ленивый компонент: 

// LazyComponent.js
import React from "react";

export default function LazyComponent() {
  return (
    <div>
      <h1>I'm Lazy</h1>
      <p>
        This is my lazy component!
      </p>
    </div>
  );
}

codeSandbox пример.

...