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

JavaScript React.js

猴子村村

2020-03-20

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

任何帮助将不胜感激。

第2530篇《在React中动态渲染外部HTML / React组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
Stafan 2020.03.20

您可以参考以下链接

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

对于React Components部分，您可以使用渲染静态HTML标记字符串

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

But be sure that the html you get is from an authentic source and will not contain any malicious scripts

null 2020.03.20

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

以这些符号结尾。

小卤蛋 2020.03.20

有趣的问题！

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

查看此沙箱： 编辑24r1ypp00p

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

查看此沙箱： 编辑24r1ypp00p

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android