如何在 React App 中显示 Emoji

Posted 2023-02-24

【中文标题】如何在 React App 中显示 Emoji

【英文标题】：How to display Emoji in React App

【发布时间】：2017-07-12 22:12:54

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

您的代码在我的机器（OS X，Chrome 56）上运行良好，尽管它应该是 ::after（两个冒号）。如果您的 CSS 在 Content-Type 标头中为 served with the correct encoding specified 或 @charset 声明，您也可以直接使用表情符号 (.smiley::after content: '????'; )。相关：***.com/questions/10393462/…

????伟大的 ？？？？。不要忘记按 Ctrl+Cmd + Space

@BeesNees 为您的 ReactApp 尝试直接的表情符号选择器，例如 github.com/Dipen-Dedania/mr-emoji 怎么样？

【参考方案1】：

所有表情符号都使用Emoji Cheat Sheet 的格式非常标准化，因此您上面给出的示例 (\01F683) 映射到表情符号备忘单中的railway_car。

使用这些标识符存储您的表情符号并稍后将其映射到实际的表情符号可能是一个更好的主意，而不必担心自己对实际的表情符号 (?) 进行编码，或者无法分辨/记住所代表的实际表情符号按 Unicode 序列 (\01F683)。

如果您希望将此人类可读的标识符映射到实际的 Unicode 序列/符号本身，您有几个选择，以 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");

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

【讨论】：

我确实看过 Twemoji Awesome 项目，但它不再被维护。表情符号字典可能只是做这项工作。会看看。谢谢！

【参考方案2】：

我们在 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" />

【讨论】：

这很棒。但它缺少很多我们需要的常见表情符号。竖起大拇指，各种笑脸等。也没有五颜六色的。不过，我确实很欣赏完整的反应解决方案。

【参考方案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>

【参考方案4】：

它们是在反应中使用表情符号的多种方式。使用 NPM，也可以通过“span”标签不使用它。

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

我觉得这个简单易用。

【参考方案5】：

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

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

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