从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

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

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将被添加到窗口对象中，这样您就可以使用lib的内容设置一个状态变量。之后，您需要为您的组件创建一个Wrapper，其中包含作为道具的外部组件。当这个道具丢失时，它可能只是显示它正在加载，否则当外部lib已经加载并准备使用时，它将呈现该组件。这样的容器如下：

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>;
}
};

我以前也遇到过这种情况，这个解决方案效果很好。回复有点晚，但我希望它能帮助你或下一个面临同样问题的人。

Answer 2

您可以使用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道具接受在等待加载组件时要渲染的任何React元素。可以将Suspense组件放置在惰性组件上方的任何位置。您甚至可以用一个Suspense组件封装多个惰性组件。