Внедрить HTML Entity Decode в react.js

Question

Я выводил текст с использованием API с сервера, и у меня есть админ, который имеет html-поля для облегчения заполнения содержимого. Проблема здесь в том, что теперь текст отображается с помощью html-кодов. Как я могу избавиться от этих неработающих html-кодов. Я предполагаю, что мне нужно использовать декодирование html-объекта? Как я буду реализовывать это в проекте реагирования? Ниже вы видите, что текст иллюстрирует не только текст и html-код.

export class FullInfoMedia extends React.Component { 
    render() { 
     const renderHTML = (escapedHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: escapedHTML } }); 

     return (
      <div> 
       <div className="about-title"> 
        <div className="container"> 
         <div className="row"> 
          <img className="center-block" src={this.props.about.image}/> 

          <h2>{this.props.about.title}</h2> 
          {renderHTML(<p>{this.props.about.body}</p>)} 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

Answer 1

Вы можете использовать dangerouslySetInnerHTML, но убедитесь, что вы предоставляете только ввод, а не пользователи. Это отличный способ для XSS.

Пример использования:

const renderHTML = (rawHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: rawHTML } }); 

И тогда в качестве компонента:

{renderHTML("<p>&amp;nbsp;</p>")}