从外部源动态加载 React 组件/捆绑包

Posted 2023-02-21

【中文标题】从外部源动态加载 React 组件/捆绑包

【英文标题】：Dynamically load a React component/bundle from external source

【发布时间】：2019-11-13 23:08:31

【问题描述】：

我想要实现的是允许人们创作和构建他们自己的 React 内容（假设该内容是可信的，因为它将由我自己的 API 提供），然后将该内容动态加载到我的 React UI 中。

我一直在寻找一种方法来让它工作，但我错过了让它工作的最后一部分，或者这可能是不可能的。

所以想象一下，我已经部署了捆绑的 UI，并运行了一个基本应用程序，例如：（为简洁起见，我省略了模块导入）

const App = () => (
  <h1>My App</h1>
  <DynamicContent />
);

...所以对于动态内容组件，我希望能够加载外部源 - 我已经看到 react-loadable 提到了很多，所以希望这会有所帮助：

const DynamicComponent = () => (
  state =  content: null ;

  componentDidMount() 
    const content = Loadable(
      loader: () => import(fetch('http://localhost:3000/dynamic')),
      loading: () => <div>Loading  m ...</div>,
    );
    this.setState( content );
  

  render() 
    return this.state.content;
  
);

如果我们假设点击http://localhost:3000/dynamic 会返回这样一个组件的字符串：

const MyContent = () => <h2>Dynamic Content</h2>;

export default MyContent;

我发现无论我以何种格式返回获取的 JS（如上的原始 JSX、完全转译的 JS 或 webpack 包），内容都不会呈现。

我可以使动态内容呈现的唯一方法是它是否是 UI 代码库中的现有内容，该内容是通过相对文件导入进行代码拆分的，例如import('./DynamicContent').

这甚至可能吗？感觉应该是这样，但我显然在我的理解中遗漏了一些东西。也许有一个涉及 s-s-r 的解决方案，但我可以找到一个有用的示例来放置我需要的部分。

谢谢。

【问题讨论】：

你可以检查代码拆分是如何工作的（reactjs.org/docs/code-splitting.html）我希望它会给一些想法

嗨@MikhailTokarev 我更新了上面的问题说这对我有用的唯一方法是如果我使用代码拆分并且“动态”内容实际上已经是UI代码库的一部分webpack 捆绑。但是，如果此内容在运行时才可用，那么我无法找到按需加载此内容的方法。

localhost:3000/dynamic 究竟返回了什么？ HTML 字符串还是 JS 包？

@rupil 我试过 JSX 字符串，转译的 JS 字符串和 JS webpack 包。

@Michael 你解决了这个问题吗？我也面临着类似的情况

【参考方案1】：

你必须使用“React.Suspense”。改变 App.js 如下

const App = () => (
  <h1>My App</h1>
  <React.Suspense fallback="Loading...">
     <DynamicContent />
  </React.Suspense >
);