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

您可以使用react提供的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函数，您可以将动态导入呈现为常规组件。

fallback道具在等待组件加载时接受要渲染的任何React元素。您可以将Suspense组件放置在惰性组件上方的任何位置。您甚至可以使用单个Suspense组件包装多个惰性组件。

从URL动态导入文件

1 个答案: