Renderuj ciąg HTML jako prawdziwy HTML w komponencie React

Oto, czego próbowałem i jak idzie źle.

To działa:

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

To nie:

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

Właściwość description jest zwykłym ciągiem zawartości HTML. Jednak z jakiegoś powodu jest renderowany jako ciąg znaków, a nie jako HTML.

Jakieś sugestie?

Sprawdź, czy tekst, który próbujesz dołączyć do węzła, nie zawiera znaków ucieczki w następujący sposób:

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

Zamiast tego:

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

jeśli jest uciekany, powinieneś przekonwertować go po stronie serwera.

Węzeł jest tekstowy, ponieważ został zmieniony

Węzeł jest węzłem dom, ponieważ nie ma ucieczki

Czy this.props.match.descriptionjest ciągiem czy przedmiotem? Jeśli jest to ciąg znaków, powinien zostać przekonwertowany na HTML. Przykład:

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'));

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

Jeśli jednak description: <h1 style="color:red;">something</h1>bez cudzysłowów ''otrzymasz:

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

Jeśli jest to ciąg i nie widzisz żadnych znaczników HTML, jedyny problem, jaki widzę, to nieprawidłowe znaczniki.

AKTUALIZACJA

Jeśli masz do czynienia z HTMLEntitles. Musisz je zdekodować przed wysłaniem dodangerouslySetInnerHTML , dlatego nazwali to niebezpiecznie :)

Przykład pracy:

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'));

Używam parsera „react-html-parser”

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

Źródło na npmjs.com

Podnoszę komentarz @ okram, aby uzyskać lepszą widoczność:

z jego opisu na githubie: Konwertuje ciągi HTML bezpośrednio na komponenty Reacta, unikając konieczności używania niebezpiecznego zestawu InsetInnerHTML z npmjs.com Narzędzie do konwersji łańcuchów HTML na komponenty React. Unika używania niebezpiecznego zestawu elementówInnerHTML i konwertuje standardowe elementy HTML, atrybuty i style wbudowane na ich odpowiedniki w React.

Jeśli masz kontrolę nad tym, skąd pochodzi ciąg znaków zawierający html (tj. Gdzieś w Twojej aplikacji), możesz skorzystać z nowego <Fragment>interfejsu API, wykonując coś takiego:

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

Używasz po prostu niebezpiecznieSetInnerHTML metody React

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

Możesz też wdrożyć więcej w ten prosty sposób: Renderuj kod HTML w postaci surowej w aplikacji React

niebezpiecznieSetInnerHTML

niebezpiecznieSetInnerHTML jest zamiennikiem Reacta dla używania innerHTML w DOM przeglądarki. Ogólnie rzecz biorąc, ustawienie kodu HTML z kodu jest ryzykowne, ponieważ łatwo jest nieumyślnie narazić użytkowników na atak typu cross-site scripting (XSS). Możesz więc ustawić HTML bezpośrednio z Reacta, ale musisz niebezpiecznie wpisać SetInnerHTML i przekazać obiekt z kluczem __html, aby przypomnieć sobie, że jest niebezpieczny. Na przykład:

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

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

Używam innerHTML razem z ref to span:

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

W moim przypadku użyłem reakcji-render-html

Najpierw zainstaluj pakiet przez npm i --save react-render-html

następnie,

import renderHTML from 'react-render-html';

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

Nie mogłem się zabrać npm builddo pracy react-html-parser. Jednak w moim przypadku udało mi się z powodzeniem skorzystać z https://reactjs.org/docs/fragments.html . Miałem wymóg, aby pokazać kilka znaków Unicode HTML, ale nie powinny one być bezpośrednio osadzane w JSX. W JSX musiało zostać pobrane ze stanu komponentu. Fragment kodu komponentu znajduje się poniżej:

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

używam 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>)

Jeśli masz kontrolę do {this.props.match.description} i jeśli używasz JSX. Zalecałbym, aby nie używać „niebezpiecznieSetInnerHTML”.

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