[javascript] ReactJS는 HTML 문자열을 JSX로 변환

JAVASCRIPT / 글쓴이

페이스 북의 ReactJS를 다루는데 어려움을 겪고 있습니다. 아약스를하고 html 데이터를 표시하려고 할 때마다 ReactJS는 텍스트로 표시합니다. (아래 그림 참조)

ReactJS 렌더 문자열

jquery Ajax의 성공 콜백 기능을 통해 데이터가 표시됩니다.

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});

여기에 이미지 설명을 입력하십시오

이것을 html로 변환하는 쉬운 방법이 있습니까? ReactJS를 사용하여 어떻게해야합니까?

답변

기본적으로 React는 XSS (Cross-Site Scripting) 를 방지하기 위해 HTML을 이스케이프합니다 . HTML을 실제로 렌더링하려면 다음 dangerouslySetInnerHTML속성을 사용할 수 있습니다 .

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

React는 의도적으로 귀찮은 구문을 사용하여 실수로 텍스트를 HTML로 렌더링하지 않고 XSS 버그를 발생시킵니다.

답변

이를 위해 더 안전한 방법이 있습니다. 문서가 업데이트되었습니다 이러한 방법으로.

다른 방법들

  1. 가장 쉬움 -유니 코드를 사용하고 파일을 UTF-8로 저장 한 후 UTF-8로 설정하십시오 charset.

    <div>{'First · Second'}</div>

  2. 더 안전-Javascript 문자열 내 엔터티에 유니 코드 번호를 사용하십시오.

    <div>{'First \u00b7 Second'}</div>

    또는

    <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

  3. 또는 문자열과 JSX 요소가 혼합 된 배열입니다.

    <div>{['First ', <span>&middot;</span>, ' Second']}</div>

  4. 최후의 수단 -을 사용하여 원시 HTML을 삽입하십시오 dangerouslySetInnerHTML.

    <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

답변

내가 사용하는 것이 좋습니다 섞어 짜다가 만든 milesj . 독창적 인 기술을 사용하여 HTML을 구문 분석하고 DOM에 안전하게 삽입하는 놀라운 라이브러리입니다.

Interweave는 HTML을 안전하게 렌더링하고 속성을 필터링하며 매 처로 텍스트 자동 줄 바꿈, 이모티콘 문자 렌더링 등을 수행하는 반응 라이브러리입니다.

  • Interweave는 다음을 수행 할 수있는 강력한 React 라이브러리입니다.
    • dangerouslySetInnerHTML을 사용하지 않고 HTML을 안전하게 렌더링합니다.
    • HTML 태그를 안전하게 제거하십시오.
    • 자동 XSS 및 주입 보호.
    • 필터를 사용하여 HTML 속성을 정리하십시오.
    • 매처를 사용하여 구성 요소를 보간합니다.
    • 자동 링크 URL, IP, 이메일 및 해시 태그.
    • 이모티콘 및 이모티콘 문자를 렌더링합니다.
    • 그리고 훨씬 더!

사용 예 :

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

답변

npm i html-react-parser;

import Parser from 'html-react-parser';

<td>{Parser(this.state.archyves)}</td>

답변

이 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 링크

답변

html-react-parser에서 Parser ()를 사용할 수도 있습니다. 나는 같은 것을 사용했다. 링크가 공유되었습니다.

답변

react-html-parser라는 npm 패키지를 사용하기 시작합니다.