在React中动态呈现外部HTML/React组件
是否有可能从外部源获取HTML/JSX内容并以动态方式呈现？在我们的例子中，我们希望从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服务是很容易的)。
2)由于我们不知道Wordpress的内容将使用哪些组件，我们必须在页面顶部导入每个组件，内容可能包括组件，也可能包含组件，谁知道呢？
现在，我认为这是不可能的，这意味着我们必须重新考虑使用React，但我真的希望有人有答案。
任何帮助都会很感激的。
回答 3
Stack Overflow用户
发布于 2018-07-26 13:44:35
有趣的问题！
你应该试试react jsx-解析器。我认为它解决了你的问题。不确定它是如何与下一个JS一起工作的--我对下一个JS没有经验。
看看这个沙箱：
关于所有组件都被捆绑在一起，你是对的。有办法解决这个问题。:)
看看这个沙箱：
我已经创建了一个dynamicComponent，它期待一个导入承诺并返回一个组件。
我改变了在index.js中导入A、B和C组件的方式。这样，每个动态导入的组件都会获得一个单独的包，并且只有在需要时才会被请求。
这应该能解决你的第二个问题。
Stack Overflow用户
发布于 2018-07-23 16:55:52
您可以参考下面的链接
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
对于部分，可以使用
https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup
但是，请确保您获得的html来自真实的源，并且不会包含任何恶意脚本。
Stack Overflow用户
发布于 2018-07-23 17:22:28
您可以像这样动态地呈现外部HTML/React组件，只需在下面的引号, content: `<div>${<Slider imageCount="5" galleryID="1"></Slider>}<span>This is an image gallery</span></div>中
以这些“符号”结尾。
https://stackoverflow.com/questions/51482929
复制相似问题
腾讯云开发者
