HTML dizesini React bileşeninde gerçek HTML olarak işleme

İşte denediğim ve nasıl ters gittiği.

Bu çalışıyor:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

Bu değil:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

Description özelliği, normal bir HTML içeriği dizesidir. Bununla birlikte, bazı nedenlerden dolayı HTML olarak değil, bir dize olarak oluşturulur.

Herhangi bir öneri?

Düğüme eklemeye çalıştığınız metnin şu şekilde çıkıp çıkmadığını kontrol edin:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

Bunun yerine:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

eğer kaçtıysa, onu sunucu tarafınızdan dönüştürmelisiniz.

Düğüm metindir çünkü çıkış karakterlidir

Düğüm bir dom düğümüdür çünkü çıkış yapılmamıştır

Mı this.props.match.descriptionbir dize veya bir nesne? Bir dizeyse, HTML'ye dönüştürülmelidir. Misal:

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:red;">something</h1>'
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

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

Sonuç: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

Bununla birlikte, açıklama <h1 style="color:red;">something</h1>tırnaksız ise '', şunları elde edeceksiniz:

​Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

Bu bir dizeyse ve herhangi bir HTML biçimlendirmesi görmüyorsanız, gördüğüm tek sorun yanlış biçimlendirmedir ..

GÜNCELLEME

HTML Varlıkları ile uğraşıyorsanız, göndermeden önce bunların kodunu çözmeniz gerekir dangerouslySetInnerHTML, bu yüzden buna "tehlikeli" denir :)

Çalışma örneği:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>'
    }
  }

   htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

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

'React-html-parser' kullanıyorum

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

Npmjs.com'daki kaynak

Daha fazla görünürlük için @ okram'ın yorumunu kaldırma:

github tanımından: HTML dizelerini doğrudan React bileşenlerine dönüştürerek, npmjs.com'dan tehlikeli bir şekilde SetInnerHTML kullanma ihtiyacını ortadan kaldırır HTML dizelerini React bileşenlerine dönüştürmek için bir yardımcı program. DangerouslySetInnerHTML kullanımından kaçınır ve standart HTML öğelerini, niteliklerini ve satır içi stilleri React eşdeğerlerine dönüştürür.

Html içeren dizenin nereden geldiği üzerinde kontrole sahipseniz (yani, uygulamanızın herhangi bir yerinde), yeni <Fragment>API'den aşağıdaki gibi bir şey yaparak yararlanabilirsiniz :

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}

React'in sadece dangerouslySetInnerHTML yöntemini kullanıyorsunuz

<div dangerouslySetInnerHTML={{ __html: htmlString }} />

Veya bu kolay yolla daha fazlasını uygulayabilirsiniz: HTML'yi React uygulamasında ham olarak oluşturun

dangerouslySetInnerHTML

hazardouslySetInnerHTML, tarayıcı DOM'da innerHTML'yi kullanmak için React'in yerini alıyor. Genel olarak, HTML'yi koddan ayarlamak risklidir çünkü kullanıcılarınızı yanlışlıkla siteler arası komut dosyası çalıştırma (XSS) saldırısına maruz bırakmak kolaydır. Dolayısıyla, HTML'yi doğrudan React'ten ayarlayabilirsiniz, ancak tehlikeli olduğunu kendinize hatırlatmak için, hazardouslySetInnerHTML yazmanız ve __html anahtarıyla bir nesneyi iletmeniz gerekir. Örneğin:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

İç HTML'yi aşağıdakileri kapsayacak şekilde birlikte kullanıyorum:

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}

Benim durumumda react-render-html kullandım

Önce paketi şu şekilde kurun: npm i --save react-render-html

sonra,

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

Bir dizede HTML'niz varsa, adlı bir paketi kullanmanızı tavsiye ederim html-react-parser.

Yükle: npm install html-react-parser veya iplik kullanıyorsanız,yarn add html-react-parser

Bunun gibi bir şey kullanın

import parse from 'html-react-parser'
const yourHtmlString = '<h1>Hello</h1>'

<div>
    {parse(yourHtmlString)}
</div>

Referans: https://www.npmjs.com/package/html-react-parser

Ben alamadım npm buildile işe react-html-parser. Ancak benim durumumda https://reactjs.org/docs/fragments.html'yi başarıyla kullanabildim . Birkaç html unicode karakteri gösterme zorunluluğum vardı, ancak bunlar doğrudan JSX'e gömülmemelidir. JSX içinde, Bileşenin durumundan seçilmesi gerekiyordu. Bileşen kod pasajı aşağıda verilmiştir:

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

i kullanmak https://www.npmjs.com/package/html-to-react

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(<div>{reactElement}</div>)

{This.props.match.description} üzerinde denetiminiz varsa ve JSX kullanıyorsanız. "DangerouslySetInnerHTML" kullanmamanızı tavsiye ederim.

// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;

// Here is how you print
return (
    {description}
);