如何在 React App 中显示 Emoji

Question

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

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

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

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

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

还有其他方法吗？哪种方法最好？

Answer 1

所有表情符号都非常标准化，格式为 Emoji Cheat Sheet，因此您上面给出的示例 (F683) 映射到表情符号作弊 Sheet 中的 railway_car。

用这些标识符存储你的表情符号并在以后将其映射到实际的表情符号可能是一个更好的主意，而不用担心编码实际的表情符号 () 本身，或者无法 tell/remember由 Unicode 序列表示的实际表情符号 (F683).

如果您希望将这个人类可读的标识符映射到实际的 Unicode sequence/symbol 本身，您有几个选择，以 railway_car 为例：

Twemoji 很棒

Twemoji Awesome 就像 Font Awesome，但带有 Twitter 表情符号。

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

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

这将输出相应的 SVG：

表情符号词典

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

用法将如下所示：

emoji.getUnicode("railway_car");

这个 returns（会在现代 browsers/might 上显示，在旧 browsers/etc 上中断）。

Answer 2

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

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

检查下面的例子

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

Answer 3

我可能迟到了，但我需要用同一个组件有条件地渲染不同的表情符号，所以对我来说最简单的方法是：

转到https://unicode.org/emoji/charts/full-emoji-list.html
找到需要的表情符号，例如 U+1F609 并在您的代码中将其用作十六进制数 0x1F609 和 String.fromCodePoint 的字符串 — 见下文。
创建一个小组件以满足 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 4

有很多方法可以在 React 中使用表情符号。使用 NPM 也可以不使用“span”标签。

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

我觉得这个简单易用。

Answer 5

把它放在这里只是为了防止其他人无意中发现这个 post 寻找我需要的东西。

<p>
After a lot of Googling and reading I just copy/pasted the emoji, it seems to work fine ‍♂️. 
</p>

为了获得表情符号，我去了 Discord 发送了我需要的表情符号，然后 copy/pasted 它进入我的代码并显示在屏幕上。

如何在 React App 中显示 Emoji

How to display Emoji in React App

css

unicode

emoji

reactjs

Twemoji 很棒

表情符号词典