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

Question

我想在我的网页上的 React 聊天应用程序中显示表情符号。计划是为用户提供一个表情符号列表以供选择。如何使用像“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_carEmoji Cheat Sheet 中。

使用这些标识符存储您的表情符号并稍后将其映射到实际表情符号可能是一个更好的主意，而不必担心对实际表情符号 () 本身进行编码，或者无法分辨/记住由 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");

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