随着社交网络的发展，@提及功能已经成为了现代应用中不可或缺的一部分。如果你想在你的 React 应用中实现这个功能，你可以使用 npm 包 @mcallistersean/react-githubish-mentions。这个包提供了 GitHub 风格的 @提及功能，可以轻松地集成到你的应用中。
安装和引入
首先，你需要使用 npm 安装该包：
--- ------- ----------------------------------------
接着，在你的 JS 文件中引入这个包：
------ ------------- ---- -------------------------------------------
基本用法
在你的 React 组件中，你可以使用 组件来实现 @提及功能。
------ ------ - -------- - ---- --------
------ ------------- ---- -------------------------------------------
-------- ------------- -
----- ------- --------- - -------------
-------- ------------------- --------- -
-------------------
-
------ -
-------------- ------------- ----------------------- --
--
-这样，当用户输入 "@" 并开始输入用户名时，该组件将在下拉框中展示可能的匹配项。
属性列表
MentionsInput 组件支持以下属性：
| 属性名 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| value | string | 是 | 无 | 输入框的值 |
| onChange | function | 是 | 无 | 值改变时的回调函数 |
| placeholder | string | 否 | '@' | 输入框中默认提示文本 |
| displayTransform | function | 否 | 无 | 显示在输入框中的文本变换函数 |
| markup | string | 否 | @[__display__](__id__) |
生成的标记格式 |
| trigger | string | 否 | '@' | 触发匹配的字符 |
| data | array | 是 | 无 | 可用于匹配的数据数组 |
value
输入框的值。
-------------- ------------- -------- ----------------------- --
onChange
值改变时的回调函数。
-------- ------------------- --------- - -- ---------- - -------------- ------------- ----------------------- --
placeholder
输入框中默认提示文本。
-------------- -------------------- ------------- ----------------------- --
displayTransform
显示在输入框中的文本变换函数。
-------- ------------------------ -------- - ------ -------------- - -------------- --------------------------------------- ------------- ----------------------- --
markup
生成的标记格式。
-------------- ------------------------------ ------------- ----------------------- --
trigger
触发匹配的字符。
-------------- ----------- ------------- ----------------------- --
data
可用于匹配的数据数组。
----- ----- - - - --- -- ----- ------- -- - --- -- ----- ----- -- - --- -- ----- --------- -- -- -------------- ------------ ------------- ----------------------- --
示例代码
下面是一个使用 @mcallistersean/react-githubish-mentions 包的示例代码：
------ ------ - -------- - ---- --------
------ ------------- ---- -------------------------------------------
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
--
-------- ------------------------ -------- -
------ --------------
-
-------- ------------- -
----- ------- --------- - -------------
-------- ------------------- --------- -
-------------------
-
------ -
--------------
------------------------------
-----------
--------------------
---------------------------------------
------------
-------------
-----------------------
--
--
-
------ ------- ------------这个组件将自动匹配用户列表中的用户名，并将它们显示为链接格式。你也可以在 displayTransform 函数中定义自己的格式化规则，或者修改 markup 的格式来自定义标记格式。
总结
@mcallistersean/react-githubish-mentions 包提供了一个快速的方式来实现常见的 @提及功能。通过使用这个包，你可以轻松地在你的 React 应用中实现这个功能，并可以根据你的需求自定义格式和匹配规则。当你需要在你的应用中实现 @提及功能时，这个包值得你的一试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562dd81e8991b448e0528