如何在React App中显示表情符号

Question

我想在反应聊天应用中在我的网页上显示表情符号。该计划是为用户提供可供选择的表情符号列表。如何使用“1F683”等代码并让它们在页面上显示表情符号？我需要支持Chrome。

我可以使用css来显示表情符号。

<div className="smiley"></div>

.smiley:after {
    content: "\01F683";
}

我还可以拥有一个图像列表并将它们映射到代码并显示每个表情符号的img元素。

还有另一种方式，这是最好的方法吗？

Answer 1

我可能参加聚会很晚，但是我需要通过同一组件有条件地渲染不同的表情符号，所以对我来说，最简单的方法是：

1. 转到https://unicode.org/emoji/charts/full-emoji-list.html
2. 找到所需的表情符号，例如U+1F609，并将其用作十六进制数字0x1F609的字符串，并将其与代码中的String.fromCodePoint配合使用-参见下文。
3. 创建一个小组件来满足eslint规则，否则该规则将引发错误 Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby jsx-a11y/accessible-emoji：

const Emoji = React.memo(({ className, label, symbol }) =>
    <span className={className} role="img" aria-label={label}>
        {String.fromCodePoint(symbol)}
    </span>)

export default Emoji

因此在其他地方，您可以将其用作：

class MagnificentComponent extends PureComponent {
    getEmojiConditionally = () => this.props.happy ? '0x1F60A' : '0x1F61E'

    render = () =>
        <SomeComponentWhereINeedEmoji>
            <Emoji symbol={this.getEmojiConditionally(} />
        </SomeComponentWhereINeedEmoji>
}

Answer 2

所有表情符号都采用Emoji Cheat Sheet的格式标准化，因此上面给出的示例（\01F683）会映射到表情符号备忘单中的railway_car。

最好将emojis与这些标识符一起存储并将其映射到实际的表情符号，而不必担心编码实际的表情符号（）本身，或者无法告诉/记住实际表情符号由Unicode序列（\01F683）。

如果您希望将此人类可读的标识符映射到实际的Unicode序列/符号本身，您可以使用railway_car作为示例选择一些选项：

Twemoji很棒

Twemoji Awesome 就像Font Awesome，但是有了Twitter Emojis。

然后你可以插入一个这样的表情符号，就像Font Awesome一样。

<i class="twa twa-railway-car"></i>

这将输出相应的SVG：

表情符号字典

如果您希望使用默认浏览器的默认表情符号渲染器，那么有一个名为emoji-dictionary的npm包允许您将表情符号名称映射到Unicode字符。

用法将如下所示：

emoji.getUnicode("railway_car");

返回（在现代浏览器上显示/可能在旧版浏览器/等等上中断）。

Answer 3

我们在W3C中有表情符号的unicode。 它在{。的范围内。十六进制2600 - 26FF。}。

因此，您可以在没有CSS的情况下生成它。

检查以下示例

＆＃13;

＆＃13;

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

＆＃13;

.emoji {
  border: solid 1px #3e3e3e;
  width: 50px;
  height: 50px;
  cursor:pointer;
}

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

Answer 4

他们有多种在表情符号中使用表情符号的方法。使用NPM，也可以不使用“ span”标签。

<span role="img" aria-label="arrow">➡️</span>

我觉得这个简单易用。