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

Question

我想要实现的是允许人们创作和构建他们自己的 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') 。

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

谢谢。

Answer 1

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

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