在react.js中實現HTML實體解碼

我從服務器使用API輸出文本，並且我有一個管理員，它具有用於促進填充內容的html字段。現在的問題在這裏，文字顯示與HTML代碼。我如何擺脫那些不合格的HTML代碼。我想我必須使用html實體解碼？我將如何在反應項目中實施？下面你會看到文本不僅能夠說明文本和html代碼。在react.js中實現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> 
     ); 
    } 
}

來源

2017-02-21 Feruza

使用dangerouslySetInnerHTML –

您可以使用dangerouslySetInnerHTML，但可以肯定，你只渲染你的輸入，而不是用戶。它可以是XSS的好方法。

使用的示例：

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

，然後在組分：

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

來源

2017-02-21 08:11:28

所以，例如代碼應如下所示的代碼中的上方。我只是補充說，請問您可以查看 – Feruza

，但現在它只渲染單詞「[object Object]」 – Feruza

renderHTML函數的輸入必須是字符串，而不是對象。您正在撥打'

...

'，但您需要撥打''

...

「'（帶引號）。 –

在react.js中實現HTML實體解碼

回答

相關問題