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 庫。