如何解析来自某些特殊HTML标记的HTML?

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

How to parse html from some special html tag?

问题

尝试解决方案1:

const textHtml = '<p>测试</p><p><strong>测试</strong></p><p><em>测试</em></p>';

return (
  <div>
    <div dangerouslySetInnerHTML={{ __html: textHtml }} />
  </div>
);

尝试解决方案2,安装html包:

import parse from 'html-react-parser';

const textHtml = '<p>测试</p><p><strong>测试</strong></p><p><em>测试</em></p>';

return (
  <div>
    <div>{parse(textHtml)}</div>
  </div>
);

emstrong 标签在这两个解决方案中都不起作用。

英文:

I create a test html string and try to render it in React, but my solution is not working.

Try the solution1:

const textHtml = &#39;&lt;p&gt;Test&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Test&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;Test&lt;/em&gt;&lt;/p&gt;&#39;;

return (
  &lt;div&gt;
    &lt;div dangerouslySetInnerHTML={{ __html: textHtml }} /&gt;
  &lt;/div&gt;
);

Try the solution 2, install html package:

import parse from &#39;html-react-parser&#39;;

const textHtml = &#39;&lt;p&gt;Test&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Test&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;Test&lt;/em&gt;&lt;/p&gt;&#39;;

return (
  &lt;div&gt;
    &lt;div&gt;{parse(textHtml)}&lt;/div&gt;
  &lt;/div&gt;
);

em and strong tags are not working both of the solutions

答案1

得分: 1

这不是一个React/HTML问题,你可能有一些CSS覆盖了标签。第一个解决方案应该可以正常工作。

英文:

This is not a React/html issue, you likely have some CSS overriding <b> and <em> tags. First solution should work just fine.

huangapple
  • 本文由 发表于 2023年8月10日 15:53:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/76873664.html
匿名

发表评论

匿名网友

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

确定