从 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

您可以使用 react 提供的代码拆分。

例如：

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 prop 接受你想要渲染的任何 React 元素。 您可以将Suspense组件放置在惰性组件上方的任何位置。 你甚至可以用一个Suspense组件包装多个惰性组件。

Answer 2

您可以做的一件事是创建一个函数，在文档头中添加外部库（组件），如下所示：

const loadComponent = src => {
  return new Promise((resolve, reject) => {
    let s;
    s = document.createElement('script');
    s.src = src;
    s.type = 'text/javascript';
    s.onload = resolve;
    s.onerror = reject;
    document.head.appendChild(s);
  });
};

当你这样做时，lib 被添加到 window 对象中，这样你就可以用 lib 的内容设置一个状态变量。 之后，您需要为包含外部组件作为道具的组件创建一个 Wrapper。 当这个 prop 丢失时，它可能只是表明它正在加载，否则当外部库已加载并准备好使用时，它将呈现该组件。 这样的容器如下：

const Wrapper = props => {
  if (props.component) {
    const ComponentToRender = props.component;
    if (props.setRef) {
        return <ComponentToRender {...props} />;
    } else {
        return <ComponentToRender {...props} />;
    }
  } else {
    return <div>Loading...</div>;
  }
};

我之前一直在努力解决这个问题，这个解决方案效果很好。 回复有点晚，但我希望它可以帮助您或下一个面临相同问题的人。