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

  • Z时代
  • 2024-01-10
  • 分类：问答

是否可以从外部源获取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，但是我真的希望有人能够回答。

任何帮助将不胜感激。

回答：

有趣的问题！

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

查看此沙箱： 编辑24r1ypp00p

您对捆绑的所有组件都是正确的。有一个解决方法。:)

查看此沙箱： 编辑24r1ypp00p

我创建了一个dynamicComponent期望导入承诺并返回一个组件的。

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

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

以上是 在React中动态渲染外部HTML / React组件 的全部内容， 来源链接： utcz.com/qa/401733.html

回到顶部