作者:佳品h空投 | 来源:互联网 | 2022-12-09 19:09
是否可以从外部源获取HTML/JSX内容并在React中动态呈现它?在我们的例子中,我们想从Wordpress API获取内容并在客户端和服务器上呈现它(我们使用的是NextJS)
因此,Wordpress API返回一个JSON响应,其中包含一个内容属性,该属性是一个HTML/JSX字符串.内容看起来像这样.
{
content: "This is an image gallery
"
}
因此,正如您所看到的,它将是HTML和React组件/ JSX的混合,表示为字符串
我会使用Axios来调用内容(使用NextJS的getInitialProps()方法在服务器和客户端上),然后我需要渲染它,但我是新的反应,我可以看到一些问题.
1)在React中,JSX是在构建时编译的,而不是运行时,我看不出如何绕过它(例如,使用$ compile服务在Angular中会很容易).
2)由于我们不知道Wordpress的内容将使用哪些组件,我们必须在页面顶部导入它们中的每一个,内容可能包含一个组件,或者它可能包含一个组件,谁知道?.
现在,我认为这是不可能的,这意味着我们必须重新考虑使用React,但我真的希望有人有答案.
真的很感激任何帮助.
1> bamse..:
有趣的问题!
你应该尝试使用react-jsx-parser.我认为它解决了你的问题.不确定它如何与Next JS一起工作 - 我没有使用Next JS的经验.
看看这个沙盒:
你对捆绑的所有组件都是正确的.有一个解决方法.:)
看看这个沙盒:
我创建了一个dynamicComponent
期望导入承诺并返回组件的东西.
我改变了导入A,B和C组件的方式index.js
.这样,每个动态导入的组件都会获得一个单独的包,只在需要时才会被请求.
这应该解决你的第二个问题.