Question Rendre la chaîne HTML en tant que code HTML réel dans un composant React


Voici ce que j'ai essayé et comment ça va mal.

Cela marche:

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

Cela ne veut pas:

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

La propriété description est juste une chaîne normale de contenu HTML. Cependant, il est rendu sous forme de chaîne, pas de HTML pour une raison quelconque.

enter image description here

Aucune suggestion?


40
2017-09-28 21:42


origine


Réponses:


Vérifiez si le texte que vous essayez d’ajouter au nœud n’est pas échappé comme ceci:

var prop = {
    match: {
        description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
    }
};

Au lieu de cela:

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

Si est échappé, vous devez le convertir de votre côté serveur.

The node is text because is escaped

Le nœud est du texte car est échappé

The node is a dom node because isn't escaped

Le noeud est un noeud dom car il n'est pas échappé


16
2017-09-28 23:00



Est-ce que this.props.match.description Est-ce qu'une chaîne ou un objet? S'il s'agit d'une chaîne, il convient de la convertir au format HTML. Exemple:

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

Résultat: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

Toutefois, si description: <h1 style="color:red;">something</h1> sans les citations '' vous allez avoir:

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

Si c'est une chaîne et que vous ne voyez aucun balisage HTML, le seul problème que je vois est un balisage incorrect.

METTRE À JOUR

Si vous avez affaire à HTMLEntitles. Vous devez les décoder avant de les envoyer dangerouslySetInnerHTML c'est pourquoi ils l'ont appelé dangereusement :)

Exemple de travail:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '&lt;p&gt;&lt;strong&gt;Our Opportunity:&lt;/strong&gt;&lt;/p&gt;'
    }
  }

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

21
2017-09-28 22:28



Si vous contrôlez la provenance de la chaîne contenant le HTML (c.-à-d. Quelque part dans votre application), vous pouvez bénéficier du nouveau <Fragment> API, faire quelque chose comme:

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

4
2018-04-11 14:19