为什么在 React 中使用 dangerouslySetInnerHTML 时 HTML 没有正确渲染?

huangapple go评论78阅读模式
英文:

why the html did not render corrently when using dangerouslySetInnerHTML in react

问题

I have a html text define like this:

const helpContent = "<form name=\"punchout_form\" method=\"post\" action= ... </script>";

then I render this html text in react "react": "^17.0.1" like this:

<div style={{paddingLeft: 15, textIndent: 2}} dangerouslySetInnerHTML={{__html:helpContent1}}></div>

what makes me confusing is that the UI shows nothing, I have tried to define a simple html text like this:

const helpContent1 = "<span>fwegewgwgwe</span>";

this works fine, why the long text could not be rendered? what should I do to make it work as expect? Am I missing something?

英文:

I have a html text define like this:

const helpContent ="<form name=\"punchout_form\" method=\"post\" action=\"https://openapi.alipaydev.com/gateway.do?charset=UTF-8&method=alipay.trade.page.pay&sign=nKG8mCXQlGKOHezlqu7nM9ZJWskZsYVzWyW4Rm0dS%2BT8A4iWs3A96gwaqcdCwINIYacXQbtErYAM7GNAaqWFTNdl33Xj%2BVbEPqew%2BXO2yoihRU8onV0Omt5eo01PRITGEbclLI5v6VmpBwzbrzMawu63dSXTRWJ2jRga5ZUr1cnvexYQj3NLWH5eQS7ZHXwLhbOFlVOyostdF%2FSd9YJTFNotz25K1eipLI4JdG3%2BtaLLBQsNDahET09KWkxKjALSrZGIT48KLOmKWDMXkXTJzHSxjvOFxYKtBmwRenkRxt1wTWX21LgLH3Bi8k4N1KFNuj4FxrzI%2FJGOa58%2BULO54Q%3D%3D&return_url=http%3A%2F%2Fdomain.com%2FCallBack%2Freturn_url.jsp&notify_url=http%3A%2F%2Fdomain.com%2FCallBack%2Fnotify_url.jsp&version=1.0&app_id=2021000122621126&sign_type=RSA2&timestamp=2023-03-07+02%3A00%3A53&alipay_sdk=alipay-sdk-java-4.35.65.ALL&format=json\">\n<input type=\"hidden\" name=\"biz_content\" value=\"{"extendParams":"dd","outTradeNo":"dd","passbackParams":"ddd","productCode":"productCode","subject":"ddd","sysServiceProviderId":"ddd","totalAmount":"1"}\">\n<input type=\"submit\" value=\"立即支付\" style=\"display:none\" >\n</form>\n<script>document.forms[0].submit();</script>";

then I render this html text in react "react": "^17.0.1" like this:

<div style={{paddingLeft: 15, textIndent: 2}} dangerouslySetInnerHTML={{__html:helpContent1}}></div>

what makes me confusing is that the UI shows nothing, I have tried to define a simple html text like this:

 const helpContent1 ="<span>fwegewgwgwe</span>";

this works fine, why the long text could not be rendered? what should I do to make it work as expect? Am I missing something?

答案1

得分: 3

const helpContent = "<form name=\"punchout_form\" method=\"post\" action=\"https://openapi.alipaydev.com/gateway.do?charset=UTF-8&amp;method=alipay.trade.page.pay&amp;sign=nKG8mCXQlGKOHezlqu7nM9ZJWskZsYVzWyW4Rm0dS%2BT8A4iWs3A96gwaqcdCwINIYacXQbtErYAM7GNAaqWFTNdl33Xj%2BVbEPqew%2BXO2yoihRU8onV0Omt5eo01PRITGEbclLI5v6VmpBwzbrzMawu63dSXTRWJ2jRga5ZUr1cnvexYQj3NLWH5eQS7ZHXwLhbOFlVOyostdF%2FSd9YJTFNotz25K1eipLI4JdG3%2BtaLLBQsNDahET09KWkxKjALSrZGIT48KLOmKWDMXkXTJzHSxjvOFxYKtBmwRenkRxt1wTWX21LgLH3Bi8k4N1KFNuj4FxrzI%2FJGOa58%2BULO54Q%3D%3D&amp;return_url=http%3A%2F%2Fdomain.com%2FCallBack%2Freturn_url.jsp&amp;notify_url=http%3A%2F%2Fdomain.com%2FCallBack%2Fnotify_url.jsp&amp;version=1.0&amp;app_id=2021000122621126&amp;sign_type=RSA2&amp;timestamp=2023-03-07+02%3A00%3A53&amp;alipay_sdk=alipay-sdk-java-4.35.65.ALL&amp;format=json\">\n<input type=\"hidden\" name=\"biz_content\" value=\"{&quot;extendParams&quot;:&quot;dd&quot;,&quot;outTradeNo&quot;:&quot;dd&quot;,&quot;passbackParams&quot;:&quot;ddd&quot;,&quot;productCode&quot;:&quot;productCode&quot;,&quot;subject&quot;:&quot;ddd&quot;,&quot;sysServiceProviderId&quot;:&quot;ddd&quot;,&quot;totalAmount&quot;:&quot;1&quot;}\">\n<input type=\"submit\" value=\"立即支付\">\n</form>\n<script>document.forms[0].submit();</script>";
英文:
const helpContent =&quot;&lt;form name=\&quot;punchout_form\&quot; method=\&quot;post\&quot; action=\&quot;https://openapi.alipaydev.com/gateway.do?charset=UTF-8&amp;method=alipay.trade.page.pay&amp;sign=nKG8mCXQlGKOHezlqu7nM9ZJWskZsYVzWyW4Rm0dS%2BT8A4iWs3A96gwaqcdCwINIYacXQbtErYAM7GNAaqWFTNdl33Xj%2BVbEPqew%2BXO2yoihRU8onV0Omt5eo01PRITGEbclLI5v6VmpBwzbrzMawu63dSXTRWJ2jRga5ZUr1cnvexYQj3NLWH5eQS7ZHXwLhbOFlVOyostdF%2FSd9YJTFNotz25K1eipLI4JdG3%2BtaLLBQsNDahET09KWkxKjALSrZGIT48KLOmKWDMXkXTJzHSxjvOFxYKtBmwRenkRxt1wTWX21LgLH3Bi8k4N1KFNuj4FxrzI%2FJGOa58%2BULO54Q%3D%3D&amp;return_url=http%3A%2F%2Fdomain.com%2FCallBack%2Freturn_url.jsp&amp;notify_url=http%3A%2F%2Fdomain.com%2FCallBack%2Fnotify_url.jsp&amp;version=1.0&amp;app_id=2021000122621126&amp;sign_type=RSA2&amp;timestamp=2023-03-07+02%3A00%3A53&amp;alipay_sdk=alipay-sdk-java-4.35.65.ALL&amp;format=json\&quot;&gt;\n&lt;input type=\&quot;hidden\&quot; name=\&quot;biz_content\&quot; value=\&quot;{&amp;quot;extendParams&amp;quot;:&amp;quot;dd&amp;quot;,&amp;quot;outTradeNo&amp;quot;:&amp;quot;dd&amp;quot;,&amp;quot;passbackParams&amp;quot;:&amp;quot;ddd&amp;quot;,&amp;quot;productCode&amp;quot;:&amp;quot;productCode&amp;quot;,&amp;quot;subject&amp;quot;:&amp;quot;ddd&amp;quot;,&amp;quot;sysServiceProviderId&amp;quot;:&amp;quot;ddd&amp;quot;,&amp;quot;totalAmount&amp;quot;:&amp;quot;1&amp;quot;}\&quot;&gt;\n&lt;input type=\&quot;submit\&quot; value=\&quot;立即支付\&quot; style=\&quot;display:none\&quot; &gt;\n&lt;/form&gt;\n&lt;script&gt;document.forms[0].submit();&lt;/script&gt;&quot;;

Your inputs have the inline style style=&quot;display:none&quot; So your content is rendering, but is being hidden. Remove that line and you will see it.

huangapple
  • 本文由 发表于 2023年3月7日 02:13:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/75654399.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定