Reatjs ile ham html oluşturma

Öyleyse reaktjs ile ham html oluşturmanın tek yolu bu mu?

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

Ben JSX ile şeyler işaretlemek için bazı serin yolları olduğunu biliyorum, ama ben esas olarak (tüm sınıflar, satır içi stilleri, vb ..) ham html render edebilmek ilgileniyorum. Böyle karmaşık bir şey:

<!-- 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 tüm bunları yeniden yazmak zorunda kalmak istemem.

Belki de bunların hepsini yanlış düşünüyorum. Lütfen düzelt beni.

html-to-reactNpm modülünden yararlanabilirsiniz .

Not: Modülün yazarıyım ve birkaç saat önce yayınladım. Lütfen hataları veya kullanılabilirlik sorunlarını bildirmekten çekinmeyin.

HTML oluşturmak için artık daha güvenli yöntemler var. Bir önceki yanıtta bu örtülü burada . 4 seçeneğiniz var, son kullanımlar dangerouslySetInnerHTML.

HTML oluşturma yöntemleri

1. En kolay - Unicode'u kullanın, dosyayı UTF-8 olarak kaydedin ve UTF-8 olarak ayarlayın charset.

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

2. Daha Güvenli - Bir Javascript dizesindeki varlık için Unicode numarasını kullanın.

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

   veya

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

3. Veya dizeleri ve JSX öğeleri içeren karışık bir dizi.

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

4. Last Resort - kullanarak ham HTML ekleyin dangerouslySetInnerHTML.

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

Bunu hızlı ve kirli durumlarda kullandım:

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

Bu saf bileşeni denedim:

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

Özellikleri

• Alır classNamepervane (tarzına o kadar kolay)
• Yerini \niçin <br />(genellikle bunu yapmak ister)
• Aşağıdaki gibi bir bileşeni kullanırken içeriği çocuk olarak yerleştirin :
• <RawHTML>{myHTML}</RawHTML>

Bileşeni HTML oluşturmak için Github: RawHTML: ReactJS saf bileşeninde bir Gist'e yerleştirdim

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 , React'ın DOM tarayıcısında innerHTML kullanımı yerine geçer. Genel olarak, HTML'yi koddan ayarlamak risklidir çünkü kullanıcılarınızı yanlışlıkla siteler arası komut dosyası (XSS) saldırısına maruz bırakmak kolaydır.

Ham HTML'nizi DOM yoluyla enjekte etmeden önce (örn. DOMPurify kullanarak) sterilize etmek daha iyi / daha güvenlidir dangerouslySetInnerHTML.

DOMPurify - HTML, MathML ve SVG için yalnızca DOM, süper hızlı, uber toleranslı XSS ​​dezenfektanı. DOMPurify güvenli bir varsayılanla çalışır, ancak birçok yapılandırılabilirlik ve kanca sunar.

Örnek :

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

Ayrıştırıcı adı verilen bu kütüphaneyi kullandım . İhtiyacım olan şey için çalıştı.

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

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

dangerouslySetInnerHTMLkesinlikle gerekli olmadıkça kullanılmamalıdır. Dokümanlara göre, "Bu esas olarak DOM string manipülasyon kütüphaneleri ile işbirliği yapmak içindir" . Bunu kullandığınızda, React'in DOM yönetiminden faydalanırsınız.

Sizin durumunuzda, geçerli JSX sözdizimine dönüştürmek oldukça kolaydır; sadece classnitelikleri olarak değiştirin className. Veya yukarıdaki yorumlarda belirtildiği gibi, Bootstrap öğelerini React bileşenlerine kapsülleyen ReactBootstrap kitaplığını kullanabilirsiniz .

İşte daha önce yayınlanan RawHTML işlevinin biraz daha az düşünülmüş bir sürümü. Size şunları sağlar:

• etiketi yapılandır
• isteğe bağlı olarak yeni satır için yerine <br />sitesindeki
• RawHTML'nin oluşturulan öğeye ileteceği fazladan destek sağlama
• boş bir dize ( RawHTML></RawHTML>) sağlama

İşte bileşen:

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,
};

Kullanımı:

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

Çıktı:

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

Kesilecek:

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

Başımda div'a izin verilmeyen onLoad özniteliğine sahip bir bağlantı kullanmam gerekiyordu, bu da bana önemli bir acı verdi. Geçerli geçici çözümüm orijinal komut dosyası etiketini kapatmak, ne yapmam gerektiğini yapmak, sonra komut dosyası etiketini açmak (orijinal tarafından kapatılacak). Umarım bu, başka seçeneği olmayan birine yardımcı olabilir:

<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>`,}}/>