51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

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

英文:

How to parse html from some special html tag?

问题 {#heading}

尝试解决方案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}

得分: 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.

赞(5)
未经允许不得转载:工具盒子 » 如何解析来自某些特殊HTML标记的HTML?