[javascript] reactjs를 사용하여 원시 HTML 렌더링

그렇다면 이것이 reactjs로 원시 HTML을 렌더링하는 유일한 방법입니까?

// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

JSX로 물건을 마크 업하는 멋진 방법이 있다는 것을 알고 있지만, 주로 모든 클래스, 인라인 스타일 등으로 원시 HTML을 렌더링하는 데 관심이 있습니다. 이와 같이 복잡한 것 :

<!-- http://getbootstrap.com/components/#dropdowns-example -->
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

JSX에서 모든 것을 다시 작성하고 싶지는 않습니다.

어쩌면 나는 이것에 대해 잘못 생각하고 있습니다. 수정 해주세요.

답변

html-to-reactnpm 모듈을 활용할 수 있습니다.

참고 : 나는 모듈의 저자이며 몇 시간 전에 방금 게시했습니다. 버그 또는 사용성 문제를보고하십시오.

답변

이제 HTML을 렌더링하는 더 안전한 방법이 있습니다. 나는 이전의 대답이 덮여 여기 . 마지막 사용 방법은 4 가지 dangerouslySetInnerHTML입니다.

HTML 렌더링 방법

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

<div>{'First · Second'}</div>
더 안전-Javascript 문자열 내 엔터티에 유니 코드 번호를 사용하십시오.

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

또는

<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
또는 문자열과 JSX 요소가 혼합 된 배열입니다.

<div>{['First ', <span>·</span>, ' Second']}</div>
최후의 수단 -을 사용하여 원시 HTML을 삽입하십시오 dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />

답변

나는 이것을 빠르고 더러운 상황에서 사용했습니다.

// react render method:

render() {
    return (
      <div>
        { this.props.textOrHtml.indexOf('</') !== -1
            ? (
                <div dangerouslySetInnerHTML={{__html: this.props.textOrHtml.replace(/(<? *script)/gi, 'illegalscript')}} >
                </div>
              )
            : this.props.textOrHtml
          }

      </div>
      )
  }

답변

이 순수한 구성 요소를 시도했습니다.

const RawHTML = ({children, className = ""}) =>
<div className={className}
  dangerouslySetInnerHTML={{ __html: children.replace(/\n/g, '<br />')}} />

풍모

className소품을 가져 옵니다 (더 스타일링하기 쉬움)
로 교체 \n하십시오 <br />(종종 자주하고 싶습니다)
다음 과 같은 구성 요소를 사용할 때 컨텐츠를 하위로 배치 하십시오.
<RawHTML>{myHTML}</RawHTML>

Github의 Gist에 구성 요소를 배치했습니다. RawHTML : HTML을 렌더링하는 ReactJS 순수 구성 요소

답변

export class ModalBody extends Component{
    rawMarkup(){
        var rawMarkup = this.props.content
        return { __html: rawMarkup };
    }
    render(){
        return(
                <div className="modal-body">
                     <span dangerouslySetInnerHTML={this.rawMarkup()} />

                </div>
            )
    }
}

답변

dangerouslySetInnerHTML 은 브라우저 DOM에서 innerHTML을 대체하는 React의 대체품입니다. 일반적으로 코드에서 HTML을 설정하면 사용자가 실수로 XSS (Cross-Site Scripting) 공격에 노출되기 때문에 위험합니다.

를 통해 DOM에 삽입하기 전에 원시 HTML (예 : DOMPurify 사용)을 삭제하는 것이 dangerouslySetInnerHTML좋습니다.

DOMPurify -HTML, MathML 및 SVG를위한 DOM 전용, 초고속, 내결함성 XSS 소독제입니다. DOMPurify는 안전한 기본값으로 작동하지만 많은 구성 기능과 후크를 제공합니다.

예 :

import React from 'react'
import createDOMPurify from 'dompurify'
import { JSDOM } from 'jsdom'

const window = (new JSDOM('')).window
const DOMPurify = createDOMPurify(window)

const rawHTML = `
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
`

const YourComponent = () => (
  <div>
    { <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHTML) }} /> }
  </div>
)

export default YourComponent

답변

내가 사용하는 파서라는이 라이브러리를 . 내가 필요한 것을 위해 일했습니다.

import React, { Component } from 'react';
import Parser from 'html-react-parser';

class MyComponent extends Component {
  render() {
    <div>{Parser(this.state.message)}</div>
  }
};