在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 = 5galleryID =1>< / Slider>< span>这是一个图片库< / span>< / div> 
} 
  

因此，您可以看到它将混合使用HTML和React组件/ JSX，表示为字符串

我会使用Axios来调用内容（使用NextJS的getInitialProps（）方法在服务器和客户端上），然后我需要渲染它，但我是新的反应，我可以看到一些问题。

1）在React中，JSX是在构建时编译的，而不是运行的时间，我看不出如何绕过这个（例如，使用$ compile服务在Angular中很容易）。

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屋！