javascript - 在 React 中动态呈现外部 HTML/React 组件

Question

是否可以从外部源获取 HTML/JSX 内容并在 React 中动态呈现？在我们的例子中，我们希望从 Wordpress API 获取内容并将其呈现在客户端和服务器上(我们使用的是 NextJS)

因此，Wordpress API 返回一个 JSON 响应，其中包含一个内容属性，该属性是一个 HTML/JSX 字符串。内容看起来像这样。

{
    content: "<div><Slider imageCount="5" galleryID="1"></Slider><span>This is an image gallery</span></div>"
}

因此，如您所见，它将是 HTML 和 React 组件/JSX 的混合，表示为字符串

我会使用 Axios 调用以获取内容(在服务器和客户端上都使用 NextJS 的 getInitialProps() 方法)，然后我需要渲染它，但我是新手，我可以看到几个问题。

1) 在 React 中，JSX 是在构建时编译的，而不是运行时，我不知道如何解决这个问题(例如，在 Angular 中使用 $compile 服务会很容易)。

2) 由于我们不知道来自 Wordpress 的内容将使用哪些组件，我们必须在页面顶部导入每个组件，内容可能包含一个组件，也可能包含一个组件，谁知道呢？

现在，我认为这是不可能的，这意味着我们必须重新考虑使用 React，但我真的希望有人能给出答案。

我们将不胜感激任何帮助。

Answer 1

有趣的问题!

你应该试试 react-jsx-parser .我认为它可以解决您的问题。不确定它如何与 Next JS 一起工作 - 我没有使用 Next JS 的经验。

查看此沙箱:

---

关于捆绑所有组件的说法，您是对的。有一个解决方法。 :)

查看此沙箱:

我创建了一个 dynamicComponent，它需要一个导入 promise 并返回一个组件。

我改变了在 index.js 中导入 A、B 和 C 组件的方式。这样，每个动态导入的组件都会获得一个单独的包，并且仅在需要时才请求。

这应该可以解决您的第二个问题。