是否可以从外部源获取HTML / JSX内容并在React中动态呈现它？在我们的例子中，我们想从Wordpress API获取内容并在客户端和服务器上呈现它（我们使用的是NextJS）
因此，Wordpress API返回一个JSON响应，其中包含一个内容属性，该属性是一个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是在构建时编译的，而不是运行时，我看不出如何绕过它（例如，在使用$ compile服务的Angular中这很容易） .
2）由于我们不知道Wordpress的内容将使用哪些组件，我们必须在页面顶部导入每一个组件，内容可能包含一个组件，或者它可能包含一个组件，谁知道？ .
现在，我认为这是不可能的，这意味着我们不得不重新考虑使用React，但我真的希望有人有答案 .
真的很感激任何帮助 .
3 回答
有趣的问题！
你应该试试react-jsx-parser . 我认为它解决了你的问题 . 不确定它如何与Next JS一起工作 - 我没有使用Next JS的经验 .
看看这个沙箱：
![Edit 24r1ypp00p]()
你对捆绑的所有组件都是正确的 . 有一个解决方法 . :)
看看这个沙箱：
![Edit 24r1ypp00p]()
我创建了一个期望导入承诺并返回组件的
dynamicComponent.我更改了在
index.js中导入A，B和C组件的方式 . 这样，每个动态导入的组件都会获得一个单独的包，只在需要时才会被请求 .这应该解决你的第二个问题 .
您可以参考以下链接
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
对于React Components部分，您可以使用呈现静态HTML标记字符串
https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup
但请确保您获得的HTML来自可靠的来源，并且不包含任何恶意脚本
您可以像这样在React中动态渲染外部HTML / React组件，只需在这些引号中
, content:<div>${<Slider imageCount="5" galleryID="1"></Slider>}<span>This is an image gallery</span></div>`以这些'符号结束 .