ReactJ는 HTML 문자열을 JSX로 변환합니다.

ReactJ는 HTML 문자열을 JSX로 변환합니다.

페이스북의 ReactJs를 다루는데 어려움을 겪고 있어요.html 데이터를 표시하기 위해 ajax를 할 때마다 리액트JS는 그것을 텍스트로 표시합니다.(아래 그림 참조)

데이터는 jquery Ajax 성공 콜백 함수를 통해 표시됩니다.

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

이것을 html로 쉽게 변환할 수 있는 방법이 있나요?ReactJs를 사용하여 어떻게 하면 좋을까요?

기본적으로는 React는 HTML을 이스케이프하여 XSS(사이트 간 스크립팅)를 방지합니다.HTML을 렌더링하려면 다음 속성을 사용할 수 있습니다.

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

리액트는 텍스트를 HTML로 잘못 렌더링하거나 XSS 버그를 발생시키지 않도록 의도적으로 귀찮은 구문을 강제합니다.

이제 이를 달성할 수 있는 더 안전한 방법이 있습니다.문서는 다음 방법으로 업데이트되었습니다.

기타 방법

1. 가장 쉬운 - Unicode를 사용하여 파일을 UTF-8로 저장한 후charsetUTF-8에 접속합니다.

   <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에서 만든 Interweave를 사용하는 것을 추천합니다.HTML을 해석하고 안전하게 DOM에 삽입하기 위해 기발한 기술을 사용하는 경이로운 라이브러리입니다.

Interweave는 HTML, 필터 속성, 매처와의 자동 랩 텍스트, 이모티콘 문자 등을 안전하게 렌더링하는 리액트 라이브러리입니다.

• Interweave는 다음을 수행할 수 있는 강력한 React 라이브러리입니다.
  • 위험한 SetInner를 사용하지 않고 HTML을 안전하게 렌더링HTML.
  • HTML 태그를 안전하게 제거합니다.
  • 자동 XSS 및 주입 보호.
  • 필터를 사용하여 HTML Atribut을 클릭합니다.
  • 매처를 사용하여 구성 요소를 보간합니다.를 사용하여 구성요소를 보간합니다.
  • 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>

아직 시험 중인 사용자의 경우 npm install react-html-parser

제가 설치했을 때 매주 123628건의 다운로드가 있었습니다.

import ReactHtmlParser from 'react-html-parser'

<div>{ReactHtmlParser(htmlString)}</div>

React에서 raw html을 렌더링하려면 다음을 사용할 수 있습니다.

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

예 - 렌더링

시험은 좋은 날이다.

이 블록에 삽입된 콘텐츠를 사용하면 이 문제를 해결할 수 있습니다.{[]}이것처럼.보다 명확한 설명을 위해 아래 예를 참조할 수 있습니다.

{[
   'abc',
   <b>my bold</b>, 
   'some other text'
]} 

이렇게 하면 태그 아래의 텍스트 형식이 유지되고 다른 텍스트는 일반 텍스트로 인쇄됩니다.

이 바이올린을이것은 이렇게 작동한다

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

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

html-react-parser에서 Parser()를 사용할 수도 있습니다.저도 같은 걸 써봤어요.링크 공유

기존 답변에 없는 옵션 중 하나는 를 사용하는 것입니다(React v16 이상에서 사용 가능).이것은 임의의 html 요소를 JSX 변수로 저장하고 나중에 참조할 수 있기 때문에 가장 좋습니다.또, 사용하는 것이dangerouslySetInnerHTML안전하지 않습니다.

예를들면

const App = () => {
    const Windows = <React.Fragment>Microsoft <abbr title="Operating System">OS</abbr></React.Fragment>

    return (
      <ul>
        <li>{Windows}</li>
      </ul>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

기타 대안 및 고려사항:

1. 외부 소스에서 HTML을 가져오는 경우 가져온 HTML이 문자열 형식이기 때문에 이 방법을 사용할 수 없습니다.이 경우 html-react-parser와 같은HTML 파서를 사용하여HTML을 해석해야 합니다.
2. 키나 Atribute가 없는 경우는, 다음의 약어인 를 사용할 수도 있습니다.<React.Fragment></React.Fragment>
3. 주의해 주세요dangerouslySetInnerHTML 는 스크립트 태그를 통해 악의적인 클라이언트 측 코드가 주입될 수 있기 때문에 사용이 위험합니다.
4. @Brett은 다른 대안도 제안했습니다.
5. 주의: JSX Variale에서 따옴표를 사용합니다.
   • 정규 변수와 같이 JSX 변수를 따옴표로 둘러싸지 않아야 합니다.<React.Fragment> </ React.Fragment>
   • 에서는 마십시오(예: JSX html).title<abbr />위의 태그에는 이스케이프되지 않은 따옴표가 포함되어 있습니다.

렌더링하는 문자열에 어떤 태그가 있는지 미리 알고 있는 경우(예를 들어 문자열 작성 시 특정 태그만 허용되는 경우)에는 다음과 같이 Trans 유틸리티를 사용할 수 있습니다.

import { Trans } from 'react-i18next'
import React, { FunctionComponent } from "react";

export type MyComponentProps = {
    htmlString: string
}

export const MyComponent: FunctionComponent<MyComponentProps> = ({
  htmlString
}) => {
  return (
    <div>
      <Trans
        components={{
          b: <b />,
          p: <p />
        }}
      >
        {htmlString}
      </Trans>
    </div>
  )
}

그럼 평소처럼 사용할 수 있습니다.

<MyComponent
    htmlString={'<p>Hello <b>World</b></p>'}
/>

이것은 매우 간단합니다.
그리고 그것은 완벽하게 작동한다.

import {settings} from '../settings';


const NavBar = (props) => {
    
    let isLoggedIn=props.isLoggedIn;

    let login_partial = "";
    if(isLoggedIn)
    {login_partial= <li>Log Out</li>;}
    else{
    login_partial=
  <div>
      <li>Login</li>
    <li>Sign Up</li>
</div>;
   }

    return(
        <div>
               <ul>
                    <li>Home</li>
                    <li>Products</li>
                    {login_partial}
                </ul>
        </div>
    )
}
export default NavBar;

언급URL : https://stackoverflow.com/questions/19266197/reactjs-convert-html-string-to-jsx