Импортировать файл динамически из URL

Question

Есть ли способ загрузить содержимое файла из внешнего источника во время выполнения?

const MyComponent = (props) => {
    const [dynamicComponent, fetchComponent] = React.useState(null);

    const loadComponentDynamically = ()=> {

        const _dynamicComponent = (/*import component from external source <external url>/somecomponent.js*/);

        fetchComponent(_dynamicComponent );
    };

    return (
        <div>
             <button onClick={loadComponentDynamically }>Load component</button>
             {dynamicComponent && dynamicComponent()}
        </div>
    );
};

Answer 1

Вы можете использовать Code-Splitting , предоставленный реагировать.

Например:

import React, { Suspense } from 'react';

const MyComponent = (props) => {
  const [dynamicComponent, fetchComponent] = React.useState(null);

  const loadComponentDynamically = ()=> {

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

    fetchComponent(_dynamicComponent );
  };

  return (
    <div>
      <button onClick={loadComponentDynamically }>Load component</button>
      <Suspense fallback={<div>Loading...</div>}>
        <dynamicComponent />
      </Suspense>
    </div>
  );
};

Функция React.lazy позволяет визуализировать динамику c импортировать как обычный компонент.

Пропеллер fallback принимает любые элементы React, которые вы хотите визуализировать, ожидая загрузки компонента. Вы можете разместить компонент Suspense в любом месте над отложенным компонентом. Вы можете даже обернуть несколько ленивых компонентов одним компонентом Suspense.