在不使用react包和dangerouslysetinnerhtml的情况下转换json中的html元素

Question

我有一个json对象，其中包含html标签。我已经理解了使用dangerouslySetInnerHTML并尝试使用parse / stringify而不是它的缺点。但是我无法将对象转换为html标签。我＆＃ 39; m不允许使用任何其他反应包。那么，有什么解决方案吗？

＆＃13;

＆＃13;

[
  {
    "category": "Chapter",
    "results": [
      {
        "content": "that <em>cultural</em> tool you don’t do a good job of it. From this perspective, <em>culture</em>",
        "id": "4c00-b7f6-d6e0e252ae9e"
      },
      {
        "content": "sample <em>culture</em>",
        "id": "4c00-b7f6-d6e0e252ae9e"
      }    
      
    ]
  },
 
  {
    "category": "Learning Objectives",
    "results": [
      {
        "content": " <em>culture</em> is a communication.",
        "id": "4c00-b7f6-d6e0e252ae9e"
      },
      {
        "content": "sample <em>culture</em> which",
        "id": "4c00-b7f6-d6e0e252ae9e"
      }
    ]
  }
]

＆＃13;

import React from 'react';
import PropTypes from 'prop-types';

const Result = ({ data, onSearchResultClick }) => (<div >
  {
    data.map((category, index) => (
      <div key={index}>
        <div key={index}>{category.category}</div>
        <hr />
        <div className="searchShowData" >
          {
              category.results.map((result, resultIndex) => (
                <p
                  key={resultIndex}
                  dangerouslySetInnerHTML={{ __html: (result.content) }}
                  onClick={() => onResultClick(result.id, result.type)}
                />
              ))
            }
        </div>
      </div>
    ))
  }
</div>);

Result.propTypes = {
  data: PropTypes.array.isRequired,
  onSearchResultClick: PropTypes.func.isRequired
};

export default Result;

＆＃13;

＆＃13;

＆＃13;