介绍
react-githubish-mentions-nick 是一个基于 React 的 npm 包，用来实现类似 Github 的 @ 提到用户的功能。该包通过对用户输入的内容进行解析，找到符合特定格式的字符串，再通过自定义组件进行替换，最终呈现出可点击的用户信息。
安装
在使用 react-githubish-mentions-nick 之前，需要先进行安装。
$ npm install react-githubish-mentions-nick --save
使用
引入
安装完成后，在需要使用该组件的文件中引入：
import GitHubishMentions from 'react-githubish-mentions-nick'
简单用法
假设你想在一个文本框内实现 @ 提到用户的功能，可以使用以下代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----------------- ---- --------------------------------
-------- ------------ -
----- ------ -------- - -------------
-------- --------------- -
------------------------
-
------ -
-----
------ ------------------------------------
------------------
------------
-----------------------
-----------
--------
- ----- ----- ----- ---- --
- ----- ----- ----- ---- --
- ----- ----- ----- ---- --
--
--
------
--
-在上面的代码中，value 和 onChange 是必要的两个 props。其中，value 用来表示文本框的值，onChange 用来处理文本框值的变化。此外，还需要通过 trigger 和 users 来配置触发字符和用户列表。
自定义渲染组件
如果要对用户信息进行自定义样式和结构的渲染，需要使用 renderUser 属性来返回子组件。例如，如下代码中，我们将用户列表进行样式化、添加头像等操作：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----------------- ---- --------------------------------
-------- ------------ -
----- ------ -------- - -------------
-------- --------------- -
------------------------
-
-------- ---------------- ------ -
------ -
---- ----------- -----------------
---- --------------------------------------------------------------- --------------- --
---- ----------------------
---- ----------------------------------
---- -----------------------------------
------
------
--
-
------ -
-----
------ ------------------------------------
------------------
------------
-----------------------
-----------
--------
- ----- ----- ----- ---- --
- ----- ----- ----- ---- --
- ----- ----- ----- ---- --
--
-----------------------
--
------
--
-在上面的代码中，我们通过 renderUser 属性来自定义用户信息的渲染方式，返回一个自定义组件即可。
总结
通过本文，我们了解了 npm 包 react-githubish-mentions-nick 的使用方法，包括安装、引入、基本用法和自定义组件渲染。这个包可以帮助我们方便地实现类似 Github 的 @ 提到用户的功能，同时也可以灵活地自定义样式和结构。如果你对实现类似功能的技术感兴趣，这个包值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725781e8991b448e870c