React 中的表情符号

1. 在 React 中使用表情符号
2. 在 React 中使用 Emoji Dictionary 添加 Emojis
3. 在 React 中使用 emoji-regex 添加表情符号

我们将介绍一些可以在 React 应用程序中添加表情符号的库。

在 React 中使用表情符号

表情符号是表达不同情绪的文本侧图像。表情符号主要是在交流中引入的，无论是人与人之间还是人与群体之间。

表情符号可以用于品牌之间的交流，但表情符号的类型不同。

本教程将介绍一些库，它们可以将表情符号集成到我们的 React 应用程序中，并使它们更具娱乐性。

在 React 中使用 Emoji Dictionary 添加 Emojis

emoji-dictionary 是一个库，可以将 emojis 集成到我们的 React 应用程序中。这个库的好处是它同时提供了 getUnicode 和 getName。

我们可以将 emoji 转换成 emoji 的名字，也可以只写 emoji 的名字就可以得到 emoji。

所以让我们安装它并了解我们如何集成它。首先，我们将创建一个新应用程序并通过导入样式表来设置它的样式。

让我们使用以下命令创建一个新应用程序。

# react
npx create-react-app my-app

创建新的 React 应用程序后，我们将使用此命令转到应用程序目录。

# react
cd my-app

让我们运行我们的应用程序来检查所有依赖项是否都安装正确。

# react
npm start

使用 npm，我们将使用以下命令安装 emoji-dictionary 库。

# react
npm install --save emoji-dictionary

一旦我们安装了这个库，我们可以通过将它导入到我们需要的文件中来在我们的 React 应用程序中使用它。因此，我们将从 emoji-dictionary 导入变量 emoji。

# react
import emoji from "emoji-dictionary";

让我们使用 getUnicode 创建手表的表情符号并显示它。

# react
import "./styles.css";
import emoji from "emoji-dictionary";

export default function App() {
  const watch = emoji.getUnicode("watch");
  return (
    <div className="App">
      <h1>This is {watch}</h1>
    </div>
  );
}

输出：

我们还可以创建一个函数，可以轻松地将我们的表情符号从名称转换为表情符号。我们可以直接在模板中使用表情符号。

所以我们将创建一个函数 convertEmoji(em)，它将接受一个参数，将其转换为一个表情符号，然后返回它。

# react
function convertEmoji(em) {
    return emoji.getUnicode(em);
  }

一旦我们创建了一个函数，我们就可以使用它在我们的模板中显示一个带有表情符号的列表。

# react
<div className="App">
      <h1>Today's Menu</h1>
      <ul>
        <li>{convertEmoji("pizza")} Pizza</li>
        <li>{convertEmoji("sandwich")} Sandwich</li>
        <li>{convertEmoji("coffee")} Coffee</li>
        <li>{convertEmoji("tea")} Tea</li>
      </ul>
    </div>

输出：

如上所示，我们可以通过导入一个库并创建一个简单的函数来轻松地在我们的 React 应用程序中使用表情符号，该函数可以轻松地将名称转换为表情符号。

在 React 中使用 emoji-regex 添加表情符号

在下一个示例中，我们将讨论另一个库 emoji-regex。它也是一个很好的库，可以帮助我们将表情符号集成到我们的 React 应用程序中。

这个库最好的地方是我们可以直接在使用 Unicode 的模板中使用它。所以让我们在 React 中创建一个新的应用程序，实现这个库并了解它是如何工作的。

因此，让我们使用以下命令创建一个新的 React 应用程序。

# react
npx create-react-app my-app

在 React 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

# react
cd my-app

让我们运行我们的应用程序来检查所有依赖项是否都安装正确。

# react
npm start

使用 npm 命令安装 emoji-regex 库。

# react
npm install emoji-regex

现在，我们将把这个库导入到我们需要的任何文件中。

# react
import "emoji-regex";

让我们使用这个库集成表情符号并创建与前一个相同的示例。因此，我们将为前面示例中使用的所有表情符号定义常量。

# react
const pizza = "\u{1F355}";
const Sandwich = "\u{1F96A}";
const coffee = "\u{2615}";
const tea = "\u{1F375}";

我们将在模板中使用这些常量来显示。

# react
<div className="App">
      <h1>Today's Menu</h1>
      <ul>
        <li>{pizza} Pizza</li>
        <li>{Sandwich} Sandwich</li>
        <li>{coffee} Coffee</li>
        <li>{tea} Tea</li>
      </ul>
    </div>

输出：

使用该库在 React 应用程序中使用表情符号非常容易。我们还可以在 React 应用程序中为表情符号使用 Fontawesome 库。