Dans un composant React, je stocke dans des éléments this.state.partiallogin html:

GetPartialLogin() {
    axios.get('/account/loginpartial').then(o => {
        this.setState({ partiallogin: '<div>' + o.data + '</div>' });
    });
}

Puis dans render() je l'utilise comme ceci:

render(){ return (
     <div className="col noselect">{this.state.partiallogin}</div>
);}

Cependant le html interne n'est pas rendu, il reste sous forme de texte. J'ai compris que dangerouslySetInnerHTML n'est pas la bonne méthode à utiliser.

REMARQUE 1:

<div className="col noselect">
    <span dangerouslySetInnerHTML={{ __html: this.state.partiallogin }}/>
</div>

N'aide pas: j'ai toujours le html sous forme de chaîne.

REMARQUE2: Et quand j'utilise this.setState({ partiallogin: <div>{o.data}</div> });

Je me retrouve avec <div class="col noselect"><span>[object Object]</span></div>

REMARQUE3: le contenu de o.data est:

<form method="post" id="logoutForm" class="navbar-right" action="/Account/Logout">
    <ul class="nav navbar-nav navbar-right">
        <li><a title="Manage" href="/Account/Manage">Hello XXX@YYY.com!</a></li>
        <li><button type="submit" class="btn btn-link
                navbar-btn navbar-link">Log out</button></li>
    </ul>
<input name="__RequestVerificationToken" type="hidden" value="ZZZ"/></form>

NB: le contenu o.data n'est pas échappé, le webpack met correctement à jour les mises à jour du code.

Question: comment puis-je demander à react de prendre une chaîne et de la rendre au format HTML?

1
Soleil - Mathieu Prévot 11 avril 2018 à 16:09

3 réponses

Meilleure réponse

Le problème était de convertir le HTML en chaîne en JSX. Pour résoudre ce problème, je devais installer html-to-react avec

$ npm install --save html-to-react

Puis appeler

GetPartialLogin() {
    var HtmlToReactParser = require('html-to-react').Parser;
    var parser = new HtmlToReactParser();
    axios.get('/account/loginpartial').then(o => {
        this.setState({
             partiallogin: parser.parse(o.data)
        });
    });
}

Avant le rendu

<div className="col noselect">{this.state.partiallogin}</div>
0
Soleil 12 avril 2018 à 10:49

Déposez simplement les guillemets et faites-le dans JSX

GetPartialLogin() {
 axios.get('/account/loginpartial').then(o => {
     this.setState({ partiallogin: <div>{o.data}</div> });
 });
}
0
illiteratewriter 11 avril 2018 à 13:31

Puisque le composant react est une fonction, vous devez changer cette propriété state pour être une fonction.

this.setState({ partiallogin: '<div>' + o.data + '</div>' });

À

this.setState({partiallogin: ()=>(<div>{o.data}</div>)});

À l'intérieur de la fonction render, appelez la fonction de composant de propriété d'état {this.state.partiallogin()}.

Vous pouvez vérifier mon codepen exemple

Veuillez noter que cette méthode est extrêmement dangereuse et pourrait entraîner de nombreuses erreurs XSS et d'exécution en raison du fait que vous injectez du code HTML dangereux à partir d'une source extérieure.

0
Lior G 12 avril 2018 à 06:54