Question

我想要实现的是允许人们创作和构建自己的React内容（假定此内容是受信任的，因为它将通过我自己的API提供），然后将该内容动态加载到我的React UI中。 / p>

我一直在努力寻找一种方法来实现此目的，但是我却错过了最后一个使之行之有效的方法，否则可能无法实现。

因此，想象一下我已经部署了捆绑的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 >
);

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

1 个答案: