reactjs를 사용하여 원시 html 렌더링

reactjs를 사용하여 원시 html 렌더링

이게 raw html을 reactjs로 렌더링하는 유일한 방법인가요?

// 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에서 마크업을 하는 멋진 방법이 몇 가지 있다는 것을 알지만, 주로 (모든 클래스, 인라인 스타일 등) raw 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을 렌더링하는 더 안전한 방법이 있습니다. 이전 답변에서 이를 다루었습니다.4가지 옵션이 있습니다.마지막 용도dangerouslySetInnerHTML.

HTML 렌더링 방법

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'}} />

위험하게 SetInnerHTML은 내부 사용을 위한 React의 대체 수단입니다.브라우저의 DOM 내의 HTML.일반적으로 HTML을 코드에서 설정하면 사용자가 실수로 사이트 간 스크립팅(XSS) 공격에 노출되기 쉽기 때문에 위험합니다.

raw HTML(DOMPurify 등)을 경유하여 DOM에 삽입하기 전에 saniting하는 것이 좋습니다.dangerouslySetInnerHTML.

DOMPurify - HTML, MathML 및 SVG용 DOM 전용 초고속 Uber Tolerance 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

npm 모듈을 활용할 수 있습니다.

메모: 저는 이 모듈의 저자로 몇 시간 전에 공개되었습니다.버그나 사용상의 문제가 있으면, 부담없이 보고해 주세요.

빠르고 더러운 상황에서 사용해 왔습니다.

// 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: Raw에 컴포넌트를 배치했습니다.HTML: 리액트HTML을 렌더링하기 위한 JS 순수 구성 요소

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>
            )
    }
}

파서라는 도서관을 이용했어요.내가 필요로 하는 것을 위해 작동했어.

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

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

dangerouslySetInnerHTML꼭 필요한 경우가 아니면 사용하지 마십시오.문서에 따르면 "이는 주로 DOM 문자열 조작 라이브러리와 협력하기 위한 것입니다."이 기능을 사용하면 React의 DOM 관리 기능을 포기하게 됩니다.

구문으로 은 매우 구문을 변경하기만 하면 .변경만 하면 됩니다.class의 어트리뷰트className또는 위의 코멘트에서 설명한 바와 같이 부트스트랩 요소를 React 컴포넌트에 캡슐화하는 React Bootstrap 라이브러리를 사용할 수 있습니다.

여기 조금 덜 고집스러운 버전의 Raw가 있습니다.HTML 함수가 이전에 게시되었습니다.다음과 같은 이점이 있습니다.

• 태그를 설정하다
• 로 줄바꿈을 하다<br />
• raw의 여분의 소품을 건네주다HTML이 생성된 요소에 전달됩니다.
• 줄을 공급하다RawHTML></RawHTML>)

컴포넌트는 다음과 같습니다.

const RawHTML = ({ children, tag = 'div', nl2br = true, ...rest }) =>
    React.createElement(tag, {
        dangerouslySetInnerHTML: {
            __html: nl2br
                ? children && children.replace(/\n/g, '<br />')
                : children,
        },
        ...rest,
    });
RawHTML.propTypes = {
    children: PropTypes.string,
    nl2br: PropTypes.bool,
    tag: PropTypes.string,
};

사용방법:

<RawHTML>{'First &middot; Second'}</RawHTML>
<RawHTML tag="h2">{'First &middot; Second'}</RawHTML>
<RawHTML tag="h2" className="test">{'First &middot; Second'}</RawHTML>
<RawHTML>{'first line\nsecond line'}</RawHTML>
<RawHTML nl2br={false}>{'first line\nsecond line'}</RawHTML>
<RawHTML></RawHTML>

출력:

<div>First · Second</div>
<h2>First · Second</h2>
<h2 class="test">First · Second</h2>
<div>first line<br>second line</div>
<div>first line
second line</div>
<div></div>

켜집니다.

<RawHTML><h1>First &middot; Second</h1></RawHTML>

div가 허용되지 않는 onLoad 속성을 가진 링크를 머릿속에 사용해야 했기 때문에 큰 고통을 겪었습니다.현재 회피책은 원래 스크립트 태그를 닫고 필요한 작업을 수행한 다음 스크립트 태그를 여는 것입니다(원본에 의해 닫힘).다른 선택의 여지가 전혀 없는 사람에게 도움이 되기를 바랍니다.

<script dangerouslySetInnerHTML={{ __html: `</script>
   <link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans" as="style" onLoad="this.onload=null;this.rel='stylesheet'" crossOrigin="anonymous"/>
<script>`,}}/>

다음은 두 단계로 요약되는 해결 방법입니다.

1. 하여 원시 합니다.Element
2. 「」를 재귀적으로 ElementReactElement★★★★★★★★★★★★★★★★★★.

주의: 이것은 학습의 좋은 예입니다. 다른해 보세요.html-to-react★★★★★★★★★★★★★★★★★★.

이 솔루션의 특징:

• 사용하지 않습니다.dangerouslySetInnerHTML
• it it를 한다.React.createElement
• 실행 가능한 예제 저장소입니다.

---

..jsx 삭제:

// RawHtmlToReactExample.jsx
import React from "react";

/**
 * Turn a raw string representing HTML code into an HTML 'Element' object.
 *
 * This uses the technique described by this StackOverflow answer: https://stackoverflow.com/a/35385518
 * Note: this only supports HTML that describes a single top-level element. See the linked post for more options.
 *
 * @param {String} rawHtml A raw string representing HTML code
 * @return {Element} an HTML element
 */
function htmlStringToElement(rawHtml) {
    const template = document.createElement('template');
    rawHtml = rawHtml.trim();
    template.innerHTML = rawHtml;
    return template.content.firstChild;
}

/**
 * Turn an HTML element into a React element.
 *
 * This uses a recursive algorithm. For illustrative purposes it logs to the console.
 *
 * @param {Element} el
 * @return {ReactElement} (or a string in the case of text nodes?)
 */
function elementToReact(el) {
    const tagName = el.tagName?.toLowerCase(); // Note: 'React.createElement' prefers lowercase tag names for HTML elements.
    const descriptor = tagName ?? el.nodeName;
    const childNodes = Array.from(el.childNodes);
    if (childNodes.length > 0) {
        console.log(`This element ('${descriptor}') has child nodes. Let's transform them now.`);
        const childReactElements = childNodes.map(childNode => elementToReact(childNode)).filter(el => {
            // In the edge case that we found an unsupported node type, we'll just filter it out.
            return el !== null
        });
        return React.createElement(tagName, null, ...childReactElements);
    } else {
        // This is a "bottom out" point. The recursion stops here. The element is either a text node, a comment node,
        // and maybe some other types. I'm not totally sure. Reference the docs to understand the different node
        // types: https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
        console.log(`This element ('${descriptor}') has no child nodes.`);

        // For simplicity, let's only support text nodes.
        const nodeType = el.nodeType;
        if (nodeType === Node.TEXT_NODE) {
            return el.textContent;
        } else {
            console.warn(`Unsupported node type: ${nodeType}. Consider improving this function to support this type`);
            return null;
        }
    }
}

export function RawHtmlToReactExample() {
    const myRawHtml = `<p>This is <em>raw</em> HTML with some nested tags. Let's incorporate it into a React element.`;
    const myElement = htmlStringToElement(myRawHtml);
    const myReactElement = elementToReact(myElement);

    return (<>
        <h1>Incorporate Raw HTML into React</h1>

        {/* Technique #1: Use React's 'dangerouslySetInnerHTML' attribute */}
        <div dangerouslySetInnerHTML={{__html: myRawHtml}}></div>

        {/* Technique #2: Use a recursive algorithm to turn an HTML element into a React element */}
        {myReactElement}
    </>)
}

이것으로 충분합니다.

    render()
    {
        var buff = '';
        for(var k=0; k<10; k++)
        {
            buff += "<span> " + k + " </span>";
        }

        return (
            <div className='pagger'>               
                  <div className='pleft'>
                     <div dangerouslySetInnerHTML={{__html: buff }} />
                  </div>
                  <div className='pright'>
                         <div className='records'>10</div>
                         <div className='records'>50</div>
                         <div className='records records_selected'>100</div>
                         <div className='records'>1000</div>
                     </div>
            </div>
        )
    }

DOMPurify와 같은 것으로 raw html을 삭제한 후 위험하게 SetInner와 함께 사용하는 것이 안전합니다.HTML

npm i dompurify

타입의 경우

npm i --save-dev @types/dompurify

import React from 'react'
import * as DOMPurify from 'dompurify';

let dirty = '<b>hello there</b>';
let clean = DOMPurify.sanitize(dirty);

function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: clean) }} />;
}

특정 셋업으로 동작시키는 데 문제가 있는 경우, 사람들이 직면할 수 있는 많은 문제를 해결하는 놀라운 동형 도말라이프 프로젝트를 검토해 보십시오.

npm i isomorphic-dompurify

import React from 'react'
import DOMPurify from 'isomorphic-dompurify';

const dirty = '<p>hello</p>'
const clean = DOMPurify.sanitize(dirty);

function MyComponent() {
    return <div dangerouslySetInnerHTML={{ __html: clean) }} />;
}

★★★★https://cure53.de/purify

것은 이쪽https://github.com/cure53/DOMPurify

https://github.com/kkomelin/isomorphic-dompurify

언급URL : https://stackoverflow.com/questions/27934238/rendering-raw-html-with-reactjs