[JQUERY] Reactjs는 jsx에 HTML 문자열을 변환

Reactjs는 jsx에 HTML 문자열을 변환

해결법

1. ---

   1.기본적으로 탈출을 방지 XSS (크로스 사이트 스크립팅)에 HTML을 반응한다. 당신이 정말로 HTML 렌더링하려는 경우 dangerouslySetInnerHTML 속성을 사용할 수 있습니다 :

   기본적으로 탈출을 방지 XSS (크로스 사이트 스크립팅)에 HTML을 반응한다. 당신이 정말로 HTML 렌더링하려는 경우 dangerouslySetInnerHTML 속성을 사용할 수 있습니다 :

   <td dangerouslySetInnerHTML={{__html: this.state.actions}} />
   

   실수로 HTML로 텍스트 렌더링 및 XSS 버그를 소개하지 않도록 세력이 의도적으로-성가신 구문을 반응한다.

2. ---

   2.이러한 목표를 달성하기 위해 지금 안전한 방법이 있습니다. 워드 프로세서는 이러한 방법으로 업데이트되었습니다.

   이러한 목표를 달성하기 위해 지금 안전한 방법이 있습니다. 워드 프로세서는 이러한 방법으로 업데이트되었습니다.

   다른 방법

3. ---

   3.나는 섞어 짜다가 milesj에 의해 만들어 사용하는 것이 좋습니다. 독창적 인 기술이 DOM에 안전하게 HTML 삽입 구문 분석 할 경우 차종이 다수의 사용을 그 경이적인 라이브러리입니다.

   나는 섞어 짜다가 milesj에 의해 만들어 사용하는 것이 좋습니다. 독창적 인 기술이 DOM에 안전하게 HTML 삽입 구문 분석 할 경우 차종이 다수의 사용을 그 경이적인 라이브러리입니다.

   사용 예 :

   import React from 'react';
   import { Markup } from 'interweave';
   
   const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus  <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"
   
   <Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave
   
   
   //to install package using npm, execute the command
   npm install interweave
   

4. ---

   4.

   npm i html-react-parser;
   
   import Parser from 'html-react-parser';
   
   <td>{Parser(this.state.archyves)}</td>
   

5. ---

   5.나는이 JS 바이올린을 발견했다. 이 같이 작동

   나는이 JS 바이올린을 발견했다. 이 같이 작동

   function unescapeHTML(html) {
       var escapeEl = document.createElement('textarea');
       escapeEl.innerHTML = html;
       return escapeEl.textContent;
   }
   
   <textarea className="form-control redactor"
                             rows="5" cols="9"
                             defaultValue={unescapeHTML(this.props.destination.description)}
                             name='description'></textarea>
   

   jsfiddle 링크

6. ---

   6.아직 설치 NPM, 실험을하는 동안 반응-HTML 파서

   아직 설치 NPM, 실험을하는 동안 반응-HTML 파서

   나는 그것을 설치하면 그것은 123,628 다운로드 (주간)했다.

   import ReactHtmlParser from 'react-html-parser'
   
   <div>{ReactHtmlParser(htmlString)}</div>
   

7. ---

   7.또한로부터 파서 ()를 사용할 수 있습니다 HTML을-반응 파서를. 나도 같은를 사용했다. 링크 공유.

   또한로부터 파서 ()를 사용할 수 있습니다 HTML을-반응 파서를. 나도 같은를 사용했다. 링크 공유.

8. ---

   8.나는 반응-HTML 파서라는 NPM 패키지를 사용하여 시작

   나는 반응-HTML 파서라는 NPM 패키지를 사용하여 시작

9. ---

   9.당신 반응에서 원시 HTML을 렌더링 할 경우 다음을 사용할 수 있습니다

   당신 반응에서 원시 HTML을 렌더링 할 경우 다음을 사용할 수 있습니다

   <div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />
   

   예 - 렌더링 시험은 좋은 날이다

from https://stackoverflow.com/questions/19266197/reactjs-convert-html-string-to-jsx by cc-by-sa and MIT license