1. 背景
react-mentions-exported-utils 是一个用于 React.js 的 npm 包，可以用于在页面元素中实现 @ 提及功能。它提供了一些使用方便的工具函数和组件，可以在项目中使用，方便快捷地实现 @ 提及功能。
在实际项目开发中，实现 @ 提及功能是很常见的需求，比如在社交网络、博客等网站中，用户可以在评论中 @ 提及其他用户，对方会收到通知。此时，需要实现一个完善的 @ 提及功能，包括搜索用户、显示搜索结果、选中用户等功能，这些功能非常复杂，需要开发者花费大量的时间和精力来实现。因此，使用 react-mentions-exported-utils 可以大大地减少项目开发的工作量，并提高开发效率。
2. 安装
要使用 react-mentions-exported-utils，需要先安装它。可以在项目根目录下使用以下命令进行安装：
npm install react-mentions-exported-utils --save
3. 使用教程
3.1. 工具函数
react-mentions-exported-utils 中提供了一些方便的工具函数，可以用于实现 @ 提及的功能。
1. getIndexOfLastMention
getIndexOfLastMention 函数可以用于获取字符串中最后一个 @ 字符的位置。
import { getIndexOfLastMention } from "react-mentions-exported-utils";
const str = "Hello @world!";
const index = getIndexOfLastMention(str); // 62. getSubstringFromIndex
getSubstringFromIndex 函数可以用于获取指定位置之后的子串。
import { getSubstringFromIndex } from "react-mentions-exported-utils";
const str = "Hello @world!";
const index = getIndexOfLastMention(str);
const substr = getSubstringFromIndex(str, index); // "@world!"3. getSubstringUntilIndex
getSubstringUntilIndex 函数可以用于获取指定位置之前的子串。
import { getSubstringUntilIndex } from "react-mentions-exported-utils";
const str = "Hello @world!";
const index = getIndexOfLastMention(str);
const substr = getSubstringUntilIndex(str, index); // "Hello "4. getKeyword
getKeyword 函数可以用于从字符串中提取关键词。
import { getKeyword } from "react-mentions-exported-utils";
const keyword = getKeyword("@world!"); // "world"5. getPlainString
getPlainString 函数可以用于从字符串中去除 @ 符号，并返回纯文本。
import { getPlainString } from "react-mentions-exported-utils";
const plain = getPlainString("Hello @world!");
console.log(plain); // "Hello world!"3.2. 组件
除了工具函数，react-mentions-exported-utils 还提供了一些便于实现 @ 提及功能的组件。
1. MentionsInput
MentionsInput 组件用于显示一个输入框，支持用户在输入过程中输入 @ 符号，并在输入框下方显示匹配搜索结果。
-- -------------------- ---- -------
------ - -------------- ------- - ---- --------------------------------
-------- ------------- -
------ -
---------------
-------- ----------- --------------- --------- ---------- --
----------------
--
-在上面的代码中，MentionsInput 组件创建了一个输入框，Mention 组件作为其子组件，用于指定需要匹配的字符串、触发字符和搜索结果。
2. Mention
Mention 组件用于指定需要匹配的字符串、触发字符和搜索结果。
-- -------------------- ---- -------
------ - -------------- ------- - ---- --------------------------------
-------- ------------- -
------ -
---------------
-------- ----------- --------------- --------- ---------- --
----------------
--
-在上面的代码中，Mention 组件指定了触发字符为 @，并指定了需要匹配的字符串数组。
3.3. 示例代码
下面是一个完整的示例代码，用于演示如何在 React.js 项目中使用 react-mentions-exported-utils 实现 @ 提及功能：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -
--------------
--------
-----------
- ---- --------------------------------
-------- ---------- -
----- ------- --------- - -------------
----- ------------ - ----- ------ -- -
----------------
--
----- ------------ - ----- -- -
---------------------
----- ------- - ------------------
-----------------------------
--
------ -
-----
----- ------------------------
-------------- ------------- ------------------------
-------- ----------- --------------- --------- ---------- --
----------------
------- -------------------------
-------
------
--
-
------ ------- ----在上面的代码中，我们创建了一个包含一个输入框和一个提交按钮的表单。在输入框中，我们使用 MentionsInput 组件和 Mention 组件来实现 @ 提及功能。在 handleSubmit 函数中，我们使用 getKeyword 函数从输入框的值中获取关键词，并在 alert 中显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f93238a385564ab7029