「这是我参与2022首次更文挑战的第29天，活动详情查看：2022首次更文挑战」。
在本文中，我们将在React中编写一个简单的搜索插件。通过这篇文章，我希望能帮助开发者们了解如何使用 React 编写插件，将它们发布到npm并将演示部署到 Github 页面。
优化插件
这是我们开发过程的最后一步。
首先，我们需要添加一个名为fuse.js的包，它是一个轻量级的模糊搜索库。它将帮助我们检查用户在输入框中键入的查询是否与data提供给我们插件的 prop 中的任何记录匹配。
让我们使用以下命令将其添加到我们的依赖项列表中：
yarn add fuse.js
现在，我们将重构我们的插件以检查查询是否与任何记录匹配。
源代码在Github上找到。
我在每个函数中添加了注释，说明了该特定函数的作用。我们从上面的代码中得到的基本功能如下：
- 用户在输入框中输入（我们将用户输入的文本称为
query）。 onChange对于输入框，插件会检查输入框的当前值是否与通过dataprop 提供给我们插件的任何记录匹配。- 如果任何记录与查询匹配，我们将呈现一个包含匹配记录列表的下拉列表。
- 如果没有记录与查询匹配，我们将不会呈现下拉列表。
如果您访问http://localhost:3000，您可以看到下拉列表显示匹配记录列表。如果输入框为空，下拉菜单将隐藏。
匹配的记录现在将出现在下拉列表中
这就是我们需要的所有代码。接下来，我们会将更改推送到Github存储库。
将我们的代码推送到 Github
在本节中，我们将创建一个 Github 存储库并将我们的代码推送到 Github。
如果你是 Github 新手，可以按照本文了解如何创建存储库。完成创建新存储库后，你需要将远程添加到您的插件。
git remote add origin https://github.com/ghoshnirmalya/react-search-box
就我而言，我添加https://github.com/ghoshnirmalya/react-search-box是因为我希望我的代码更改在该存储库中可用。对于你的情况，这将是一个不同的网址。
完成后，你可以将更改推送到 Github 存储库：
git push origin master
Github 存储库（github.com/ghoshnirmal…）
您的代码现在可以在您的 Github 存储库中使用。
插件发布到 npm
在本节中，我们会将代码发布到npm。npm 是 JavaScript 的包管理器。
create-react-library已经有一个特性，通过它我们可以将我们的插件发布到 npm 注册表。您只需要运行以下命令：
yarn publish
部署到 Github 页面
在本节中，我们将部署一个示例应用程序，该应用程序将使用我们的插件到Github pages。
create-react-library已经有一个特性，通过它我们可以将示例文件夹部署到 Github 页面。你只需要运行以下命令：
yarn deploy
现在，你可以在 中查看你的应用程序https://your-username.github.io/your-repository-name/。对我来说，它是ghoshnirmalya.github.io/react-searc… ，因为我的存储库的 url 是github.com/ghoshnirmal…。
ghoshnirmalya.github.io/react-searc…上的演示应用程序
结论
我希望这篇文章对其他人有所帮助。感谢你的阅读！
