npm 包 @mcallistersean/react-githubish-mentions 使用教程

随着社交网络的发展，@提及功能已经成为了现代应用中不可或缺的一部分。如果你想在你的 React 应用中实现这个功能，你可以使用 npm 包 @mcallistersean/react-githubish-mentions。这个包提供了 GitHub 风格的 @提及功能，可以轻松地集成到你的应用中。

安装和引入

首先，你需要使用 npm 安装该包：

npm install @mcallistersean/react-githubish-mentions

接着，在你的 JS 文件中引入这个包：

import MentionsInput from '@mcallistersean/react-githubish-mentions';

基本用法

在你的 React 组件中，你可以使用 <mentionsinput> 组件来实现 @提及功能。

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------- ---- -------------------------------------------

-------- ------------- -
  ----- ------- --------- - -------------

  -------- ------------------- --------- -
    -------------------
  -

  ------ -
    -------------- ------------- ----------------------- --
  --
-

这样，当用户输入 "@" 并开始输入用户名时，该组件将在下拉框中展示可能的匹配项。

属性列表

MentionsInput 组件支持以下属性：

value

输入框的值。

<MentionsInput value="Hello, @world!" onChange={handleChange} />

onChange

值改变时的回调函数。

function handleChange(event, newValue) {
  // 在这里更新组件的状态
}

<MentionsInput value={value} onChange={handleChange} />

placeholder

输入框中默认提示文本。

<MentionsInput placeholder="请输入用户名" value={value} onChange={handleChange} />

displayTransform

显示在输入框中的文本变换函数。

function userDisplayTransform(id, display) {
  return `@${display}`;
}

<MentionsInput displayTransform={userDisplayTransform} value={value} onChange={handleChange} />

markup

生成的标记格式。

<MentionsInput markup="[__display__](__id__)" value={value} onChange={handleChange} />

trigger

触发匹配的字符。

<MentionsInput trigger="#" value={value} onChange={handleChange} />

data

可用于匹配的数据数组。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

<MentionsInput data={users} value={value} onChange={handleChange} />

示例代码

下面是一个使用 @mcallistersean/react-githubish-mentions 包的示例代码：

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------- ---- -------------------------------------------

----- ----- - -
  - --- -- ----- ------- --
  - --- -- ----- ----- --
  - --- -- ----- --------- --
--

-------- ------------------------ -------- -
  ------ --------------
-

-------- ------------- -
  ----- ------- --------- - -------------

  -------- ------------------- --------- -
    -------------------
  -

  ------ -
    --------------
      ------------------------------
      -----------
      --------------------
      ---------------------------------------
      ------------
      -------------
      -----------------------
    --
  --
-

------ ------- ------------

这个组件将自动匹配用户列表中的用户名，并将它们显示为链接格式。你也可以在 displayTransform 函数中定义自己的格式化规则，或者修改 markup 的格式来自定义标记格式。

总结

@mcallistersean/react-githubish-mentions 包提供了一个快速的方式来实现常见的 @提及功能。通过使用这个包，你可以轻松地在你的 React 应用中实现这个功能，并可以根据你的需求自定义格式和匹配规则。当你需要在你的应用中实现 @提及功能时，这个包值得你的一试。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562dd81e8991b448e0528