在您的 WordPress 插件中重用来自 Gutenberg 的 React 组件

几天前，David 完成了一系列介绍 React 的四篇博文。 在那里，他向您解释了如何开始使用 React 在 WordPress 中轻松创建用户界面。 具体来说，在本系列文章的第 2 部分中，David 解释了如何准备开发环境以及如何创建一个简单的 React 组件。 今天我们将看到，除了创建自己的 React 组件外，重用现有组件是一个非常好的主意。

自从 Gutenberg 出现在 WordPress 中，JavaScript 和 React 框架就成为了 WordPress 开发堆栈中的关键部分。 这就是为什么如果你不习惯这些技术，你应该尽快学习它们。 我们这样做了，并且我们使用 React 完全重新编码了我们的高级插件。 这意味着要转换我们已经使用 React 组件拥有的所有用户界面。

由于程序员不应该重新发明轮子，并且在软件开发世界中，少即是多，今天我们将了解如何在 WordPress 中重用现有的 React 组件。

WordPress 中包含的 React 组件

WordPress 通过 Gutenberg 的@wordpress/components包提供了 80 多个 React 组件，您可以在开发中重用它们：

在 Gutenberg 项目的 Github 上的每个组件文件夹中，您都有每个组件的 JavaScript 源代码及其 CSS 样式，以及了解如何以及何时使用它们的文档。

在我们 Nelio 用于新 React 界面的组件中，值得强调的是Button和ButtonGroup来定义按钮。 字段和选项的所有控制器，例如CheckboxControl 、 InputControl 、 NumberControl 、 RadioControl 、 RangeControl 、 SelectControl或TextControl 。 甚至是用于选项卡式界面的TabPanel或用于浮动对话框的Popover和Modal 。 还有更多……

如果我们不得不从头开始开发这些组件，那么我们现在肯定仍然会为我们的高级插件的新 React 接口编程。 作为开发人员可以做的最好的事情是重用现有组件以节省时间。 Gutenberg 为 WordPress 提供的那些非常适合您的插件。

如何重用 WordPress React 组件

想象一下，你想在用 React 开发的界面中使用一个按钮。 感谢 Gutenberg 中的现有组件，您可以直接使用Button组件，如下例所示：

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

您可能想知道，对于按钮，您不需要使用 Gutenberg 组件，而是直接使用<button>标签。 你是对的。

但是，通过使用 Gutenberg Button ，您得到的是您的按钮与 WordPress 界面中的其他按钮具有相同的 CSS 样式。 此外，如果更新了组件及其样式，几乎每个新版本的 WordPress 都会发生这种情况，作为开发人员，您将无需做任何事情。 更新古腾堡Button的责任不在于您。 如果您使用自己的按钮，那是您必须注意的事情。

要重用现有的 Gutenberg 组件，您只需检查该组件是否存在并通过@wordpress/components包将其导入您的代码中。 正如您在上面的代码片段中看到的，我们已经从这个包中导入了Button组件。 要在您的项目中使用该软件包，您必须在终端中使用命令npm install @wordpress/components安装它。 但这已经由大卫在他的帖子中解释过，所以我不再赘述。

您必须记住的是，当您使用 PHP 函数wp_enqueue_style在 WordPress 中将其排入队列时，您必须将wp-components设置为 CSS 样式文件的依赖项，以便这些组件采用 WordPress 样式。

除非 Gutenberg 提供的那些 React 组件没有满足您的需求，否则不要重新发明轮子并使用它们。 重用现有组件的好处比使用自己的组件要大得多。

Gutenberg 的 React 组件故事书

Gutenberg 的新颖之处之一是我们可以在 Github 上找到的 Storybook。 Storybook 是一个开源工具，它提供了一个沙箱，用于单独开发和查看组件。 对于 WordPress，它可用作组件的文档等。

在古腾堡故事书中包含的各种选项中，我们可以通过Playground菜单尝试块编辑器。 但最有趣的选择是能够以友好的方式查看 Gutenberg 组件的文档。

您只需打开“组件”菜单，您就会找到 WordPress 通过@wordpress/components包提供的组件列表。 您可以探索每个 React 组件并查看使用示例及其完整的 JavaScript 代码。

例如，在下面的屏幕截图中，您会看到Button组件的示例，这些示例具有按钮可能具有的不同属性。 然后，在Story选项卡中，您将获得完整示例的源代码：

此外，某些特定组件包括旋钮选项卡中的选项，用于修改组件的属性并预览它们在其界面中引起的更改。

其中一个组件是TextControl ，用于添加文本字段。 在下面的屏幕截图中，我们看到Knob选项卡具有不同的选项来隐藏组件的标签或更改标签和帮助的文本。 因此，我们可以看到组件在更改后的外观，并决定我们希望如何在 React 接口中使用它：

并非@wordpress/components包的所有组件在 Storybook 中都有完整的文档，因此您必须转到 Github 上的组件包部分才能查看 Gutenberg 中 React 组件状态的最新版本。

然而，随着 Gutenberg Storybook 文档的完成，它对开发人员来说将变得越来越有趣。 在 WordPress 中拥有这种类型的文档是一种奢侈。 它的用处是无法讨论的。

您已经了解了 Gutenberg 的 React 组件可以为您的 WordPress 开发提供的一切。 与其重新发明轮子和开发自己的基础组件，不如先看看 Gutenberg 的 React 组件，以实现与 WordPress 界面其余部分的一致性并节省开发和维护时间。 重用软件是提高 WordPress 开发人员效率的关键。

Morning Brew 在 Unsplash 上的精选图片。