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

Question

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

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

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

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

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

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

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

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

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

Answer 1

你可以参考下面link

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

对于 React 组件部分，您可以使用

呈现静态 HTML 标记字符串

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

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

Answer 2

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

以这些 ` 符号结尾。

Answer 3

有趣的问题！

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

查看此沙箱：

---

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

查看此沙箱：

我创建了一个 dynamicComponent 需要导入承诺和 returns 一个组件。

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

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