简介
@atlaskit/mention 是一个 React 的 npm 包，用于快速构建具有提及功能的文本输入框。在开发 Web 应用程序中，@mention 功能需要实现自动补全和实时搜索，这些功能通常比较复杂。因此使用 @atlaskit/mention 可以省去开发过程中很多烦琐的工作。
安装
使用 npm 或 yarn 安装包：
npm install @atlaskit/mention
或
yarn add @atlaskit/mention
使用
如果想在你的 React 组件中使用 @atlaskit/mention，你可以采用如下的使用方式：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ ------- ---- -------------------- ----- --- ------- --------- - ----- - - ------ --- ------ - - --- ---- ----- ------ --------- ------- -- - --- ---- ----- ------- --------- ------- -- - --- ---- ----- ------- --------- -------- - - - ------------ - --- -- - --------------- ------ -------------- --- - ------------------- - ------ -- - ----- - ------ ----- - - ----------- ----- ------- - --------------- ----- ----- - --- --------------- ----- ----- ------- - ------------------- --- ------ - ----- -- --------- - --------------------- -- - ----- ---- - --------------- ----- ---- - ------------ -- -------------------- --- -------------------- -- ------ - ----- ---- - --- ------------------- ---------------- ------ ------ - --------------------- ------ - --- - ------ - ------ ------ -- -- -------- - ----- - ----- - - ----------- ------ - -------- ------------- --------------------- ------------------------------------------ ---------------------------- ------------------------ -- -- - - ------ ------- ----展开代码
在上面的 handleMentionChange 函数中，用户在输入 @ 符号后，当输入完整的 username 时系统会自动将其转化为一个链接。比如当用户输入 @Tom 时，系统就会将其转化为一个格式为 <a href="/1">Tommy</a> 的文本。
在 Mention 组件中，包括以下常用的属性：
value：文本输入框的内容。users：一个数组，其中包含用户的信息。这些信息可以是用户的名称、昵称、ID 等。onChange：输入框内容变化时触发的回调函数。onMentionChange：输入框中出现@username时触发的回调函数。placeholder：输入框的提示文本。- 其他：
Mention还提供了其他一些属性和回调函数，这里仅列出常用的几个。
细节
@atlaskit/mention 有一些细节需要注意：
users应该是一个数组，其中包含用户的相关信息。通常情况下，此信息应该从后端获取。- 在
handleMentionChange函数中，我们需要自行匹配@username的用户信息，如果没有找到对应的信息，则不执行任何操作。 - 在实际应用中，可以结合使用 CSS 样式和实际的用户数据来更好的展现用户信息。
总结
@atlaskit/mention 是一个方便开发的 npm 包，可以极大地简化开发中的 @mention 功能的实现。 在使用 @atlaskit/mention 时，需要注意一些细节。结合实际场景，配合合适的后端数据和 CSS 样式，@atlaskit/mention 可以更好的展现 @mention 的功能，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f72c083a9b7065299ccbbc0
