如何仅显示带有html标签的json数据的反应文本？答案

【问题标题】：How to show only texts in react from json data with html tag?如何仅显示带有html标签的json数据的反应文本？
【发布时间】：2021-07-03 21:12:37
【问题描述】：

我正在尝试呈现数据并且
json 数据包含 html 标签。所以它在
中是这样显示的浏览器

<ul><li>Marcus</li><li>19year old</li></ul>

它实际上包含作为文本的 html 标记。

data['id'].map((v)=>(
   <div>{v.name}</div>
   <div>{v.age}</div>
))

在反应中我怎样才能只显示文本？

【问题讨论】：

您可以使用正则表达式提取标签。我对正则表达式很糟糕，但你应该可以用谷歌搜索它。您还可以使用 javascript API 从字符串创建一个元素，然后提取您创建的元素的内部文本。

标签： json reactjs

【解决方案1】：

理想情况下，您会向我们展示 json 数据的示例，而不会看到这个答案可能没有那么有用。

您可以使用 dangerouslySetInnerHTML 来呈现一个 html 字符串，就好像它实际上是 HTML：

const data = [
  { name: "<li>Marcus</li>", age: "<li>19 year old</li>" },
  { name: "<li>Jane</li>", age: "<li>22 year old</li>" }
];

export default function App() {
  return (
    <div className="App">
      {data.map((v) => (
        <>
          <div dangerouslySetInnerHTML={{ __html: v.name }} />
          <div dangerouslySetInnerHTML={{ __html: v.age }} />
        </>
      ))}
    </div>
  );
}

代码沙盒： https://codesandbox.io/s/wandering-dream-vhprd?file=/src/App.js

【讨论】：

【解决方案2】：

我使用
yarn add react-html-parser
解决了这个问题我从这里得到了建议
Render HTML string as real HTML in a React component
你可以像下面这样使用它。

import ReactHtmlParser from 'react-html-parser';

const Component = (props) => {
   const {data} = props;
   return(
    <div>{ReactHtmlParser(data.title)}</div>
    {/* this will show bold text of hello instead of <b>hello</b> or any 
        other html form of json data */}
     )
   }

【讨论】：