在 React 中动态渲染外部 HTML/React 组件 [英] Rendering external HTML/React components dynamically in React

问题描述

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

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

<代码>{content: "<div><Slider imageCount="5" galleryID="1"></Slider><span>这是一个图片库</span></div>"}

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

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

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

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

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

任何帮助将不胜感激.

解决方案

有趣的问题！

您应该尝试

<小时>

关于捆绑所有组件是正确的.有一个解决方法.:)

查看此沙盒:

我创建了一个 dynamicComponent，它需要一个导入承诺并返回一个组件.

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

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

Is it possible to take HTML/JSX content from an external source and render it in dynamically in React? In our case we want to take content from the Wordpress API and render it on both the client and the server (we're using NextJS)

So, the Wordpress API returns a JSON response which includes a content property which is a string of HTML/JSX. the content would look something like this.

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

So, as you can see it would be a mix of HTML and React components/JSX, represented as a string

I would use Axios to make a call to get the content (on both server and client using NextJS's getInitialProps() method), then I need to render it, but i'm new to react and I can see a couple of problems.

1) In React, JSX is compiled at build time, not run time, I can't see how to get round this (It would have been easy in Angular using $compile service for example).

2) As we don't know what components the content from Wordpress is going to use, we'd have to import every single one of them at the top of the page, the content may include a component or it may include a component, who knows?.

Right now, I'm thinking this isn't possible, which would mean we'd have to reconsider using React, but I'm really hoping somebody has an answer.

Any help would really be appreciated.

解决方案

Interesting problem!

You should try react-jsx-parser. I think it solves your problems. Not sure how it works with Next JS - I have no experience with Next JS.

Check out this sandbox:

---

You are right about all the components getting bundled. There is a workaround for that. :)

Check out this sandbox:

I've created a dynamicComponent that expects an import promise and returns a component.

I changed the way A, B and C components are imported in index.js. This way each dynamically imported component gets a separate bundle and is only requested when needed.

This should solve your second problem.

这篇关于在 React 中动态渲染外部 HTML/React 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！