如何在 React App 中显示 Emoji

Question

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

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

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

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

我还可以将图像列表和 map 放到代码中，并为每个表情符号显示一个 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

所有的表情符号，都几乎与格式标准化的表情小抄，因此以上（你给出的例子\\01F683 ）映射到railway_car的表情小抄。

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

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

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

我觉得这很简单且易于使用。

Answer 5

把这个放在这里只是为了防止其他人偶然发现这篇文章寻找我需要的东西。

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

为了获得表情符号，我去了 Discord 发送了我需要的表情符号并将其复制/粘贴到我的代码中，它会显示在屏幕上。

Answer 6

---

Grinning face with big eyes反应代码：

<div>
  {String.fromCodePoint('0x1f603')}
</div>

---

Output：

---

完整的表情符号列表，v15.0 - https://unicode.org/emoji/charts/full-emoji-list.html

--