Verwenden von EmojiOne mit Reagieren

Question

Ich habe versucht, EmojiOne mit React.js mit dem Standard .toImage zu verwenden (siehe Dokumentation http: // git.emojione.com/demos/latest/jstoimage.html). Hier ist, was mein Code aussieht, mehr oder weniger

//react imports 
import emoji from 'emojione'; 
//class component etc. render 
return(
//other things from component 
    {emoji.toImage(':smile:')} 
) 

Was mich gibt

link to image

Hier ist, wie es in inspizieren sieht Element:

link to image

So aus Was ich sagen kann, ist, dass die Emojione-Bibliothek den Bildcode in React als Text und nicht als Element einfügt. Irgendeine Idee warum?

Danke!

Answer 1

React entkommt der Ausgabe von EmojiOne, um Cross-Site-Scripting-Angriffe zu vermeiden. Sie könnten (aber wahrscheinlich sollten Sie nicht ...) dangerouslySetInnerHTML verwenden, um die Ausgabe von EmojiOne als "tatsächlichen" HTML zu injizieren.

Jemand hat bereits einen Wrapper Reagieren EmojiOne geschrieben, die nützlich sein können: https://github.com/pladaria/react-emojione

Für weitere Informationen über dangerouslySetInnerHTML und warum sollte es vermieden werden, werfen Sie einen Blick auf: https://facebook.github.io/react/tips/dangerously-set-inner-html.html