在React中动态渲染外部HTML / React组件

Question

是否可以从外部源获取HTML / JSX内容并在React中动态呈现它？在我们的案例中，我们想从Wordpress API中获取内容，并在客户端和服务器上都呈现（我们正在使用NextJS）

因此，Wordpress API返回一个JSON响应，其中包括一个content属性，该属性是一串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，它期望一个导入承诺并返回一个组件。

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

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

Answer 2

您可以参考以下链接

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

对于React Components部分，您可以使用

呈现静态HTML标记字符串。

https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup

但是请确保您获取的html来自真实来源，并且不包含任何恶意脚本

Answer 3

您可以在React中动态渲染外部HTML / React组件 这样，只需在这些引号中, content: `<div>${<Slider imageCount="5" galleryID="1"></Slider>}<span>This is an image gallery</span></div>

以这些`结尾。