1

有没有办法在运行时从外部源加载文件内容？

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

2 回答 2

0

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

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

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

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

于 2021-12-16T15:45:43.027 回答
-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组件。

于 2020-03-28T08:03:11.090 回答