Como mostrar o Emoji na aplicação React
gostaria de mostrar emojis na minha página web numa aplicação react chat. O plano é dar ao usuário uma lista de emojis para selecionar. Como posso usar os códigos como '1F683' e fazê-los exibir o emoji na página? Preciso de apoiar o Chrome.
sou capaz de usar o css para mostrar o emoji.
<div className="smiley"></div>
.smiley:after {
content: "\01F683";
}
também posso ter uma lista de imagens e mapeá-las para o código e mostrar um elemento img por emoji.
Há outra maneira e qual é a melhor maneira de fazer isto?2 answers
Todos os emojis são praticamente padronizados com o formato em 'Emoticons Cheat Sheet' , por isso o seu exemplo acima (\01F683
) mapeia para railway_car
na 'Emoticons Cheat Sheet'.
Pode ser melhor guardar os seus emojis com estes identificadores e mapeá-los para os emojis actuais mais tarde, sem se preocupar em codificar os próprios emoji () reais, ou não ser capaz de dizer/recordar o emoji actual representado pela sequência Unicode (\01F683
).
Se quiseres mapear isto identificador legível pelo homem para a sequência/símbolo Unicode actual, você tem algumas opções, usando railway_car
como exemplo:
Twemoji Awesome
Twemoji Awesome é como Font Awesome, mas com Emojis no Twitter.
Pode inserir um emoji como este, tal como o Font Awesome.<i class="twa twa-railway-car"></i>
Isto irá produzir o SVG correspondente:
[[16]} Dicionário Emoji Há um pacote npm devidamente chamadoemoji-dictionary
Isso permite mapear o nome do emoji para o carácter Unicode, se quiser usar o renderizador predefinido do navegador.
A utilização será então assim:
emoji.getUnicode("railway_car");
Isto devolve (o que irá mostrar nos navegadores modernos/poderá quebrar nos navegadores mais antigos/etc).
Temos o unicode de emojis em W3C .
Está ao alcance de {. Hex 2600
-26FF
.}.
Verifique o exemplo abaixo
class Emoji extends React.Component {
render() {
const {title, code} = this.props;
return <span className="emoji" title={title}>{code}</span>
}
}
class App extends React.Component {
renderEmojis() {
const rangeEmojis = Array.from({length: 256}, (v, k) => (k + 9728).toString(16));
return rangeEmojis.map((code, index) => <Emoji code={unescape ('%u' + code)} title={"My code is :"+code} key={'emj'+index} />)
}
render() {
return (
<div>
{this.renderEmojis()}
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('#chat'))
.emoji {
border: solid 1px #3e3e3e;
width: 50px;
height: 50px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section id="chat" />