react第三方组件库

by Jacob Goh

雅各布·高

如何自定义您的第三方React组件 (How to customize your third party React components)

Component libraries make our lives easier.

组件库使我们的生活更轻松。

But as developers, you might often find yourselves in situations where third party components don’t provide the functionality or customization capability the project needs.

但是作为开发人员，您经常会在第三方组件无法提供项目所需的功能或自定义功能的情况下发现自己。

We are left with 2 choices:

我们有2个选择：

Write the component from scratch yourself
自己从头开始编写组件
Customize the third party components
定制第三方组件

What to choose depends on the component and the situation that you are in.

选择什么取决于组件和您所处的情况。

Apparently, some components are not customizable, and some feature requirements are not feasible. But most of the time, customizing third party components is the less time-consuming option. Here’s how.

显然，某些组件不可定制，并且某些功能要求不可行。但是在大多数情况下，自定义第三方组件是耗时较少的选择。这是如何做。

开始之前 (Before we start)

For example, we are going to customize the react-bootstrap-typeahead component.

例如，我们将自定义react-bootstrap-typeahead组件。

Here’s the starter if you want to follow along https://stackblitz.com/edit/react-hznpca

如果您想遵循https://stackblitz.com/edit/react-hznpca的方法，这是入门

1.覆盖CSS (1. Overwriting CSS)

This is fairly straightforward.

这很简单。

Just find out what the component’s CSS classes are and overwrite them with new CSS.

只需找出组件CSS类是什么，然后用新CSS覆盖它们即可。

例 (Example)

Goal: Add a dropdown icon to the input box, so that it looks like a drop-down.

目标：在输入框中添加一个下拉图标，使其看起来像一个下拉菜单。

Just add Font Awesome to index.html

只需将Font Awesome添加到index.html

and add this CSS to style.css

并将此CSS添加到style.css

Demo: https://stackblitz.com/edit/react-wdjptx

演示： https : //stackblitz.com/edit/react-wdjptx

2.包装器组件 (2. Wrapper Component)

This is where you can alter the default behavior of the third party component.

在这里您可以更改第三方组件的默认行为。

Start by creating a wrapper component CustomizedTypeahead and replace Typeahead with it.

首先创建包装器组件CustomizedTypeahead然后用它替换Typeahead 。

https://stackblitz.com/edit/react-rwyjmm

This wrapper component has no effect for now. It’s simply passing props down to the Typeahead component.

该包装器组件暂时无效。它只是将props传递到Typeahead组件。

We are going to customize the component behavior by making changes to props.

我们将通过更改props来定制组件的行为。

示例：设置默认道具 (Example: Setting Default Props)

Goal: Adding default props

目标：添加默认道具

Let’s start with the simplest customization.

让我们从最简单的自定义开始。

Let’s say we want all the CustomizedTypeahead to have the clearButton props enabled by default.

假设我们希望所有CustomizedTypeahead都默认启用clearButton道具。

We can do so by:

我们可以这样做：

This is equivalent to:

这等效于：

We create injectedProps and will put all the props modification inside to make the code manageable.

我们创建了injectedProps ，并将所有props修改放入其中以使代码易于管理。

Demo: https://stackblitz.com/edit/react-tk9pau

演示： https : //stackblitz.com/edit/react-tk9pau

示例：修改道具 (Example: Modifying Props)

Goal: To sort all options by alphabetic order

目标：按字母顺序对所有选项进行排序

We are receiving options, which is an array of objects, and labelKey, which tells us that the option's label should be optionObject[labelKey]. Our goal is to sort optionObject[labelKey] by alphabetic order.

我们正在接收options (它是对象的数组)和labelKey (它告诉我们选项的标签应该是optionObject[labelKey] 。我们的目标是按字母顺序对optionObject[labelKey]进行排序。

We can do so by using Array.prototype.sort() to sort the options array.

我们可以使用Array.prototype.sort()对options数组进行排序。

This way, the options in injectedProps will overwrite the original options in props. That's how we can sort all options by alphabetic order by default.

这样， options在injectedProps将覆盖原来的options中props 。这就是默认情况下我们可以按字母顺序对所有选项进行排序的方式。

Demo: https://stackblitz.com/edit/react-cqv5vz

演示： https : //stackblitz.com/edit/react-cqv5vz

示例：拦截事件监听器 (Example: Intercepting Event Listeners)

Goal: When the user selects an option, if the user has selected both “California” and “Texas” together, alert the user and clear the selection (for no particular reason other than for this demo).

目标：当用户选择一个选项时，如果用户同时选择了“加利福尼亚”和“德克萨斯”，则警告用户并清除选择(除了本演示之外，没有其他特殊原因)。

This is the fun part where you can do lots of customization.

这是一个有趣的部分，您可以在其中进行很多自定义。

Basically, this is how it will work:

基本上，这就是它的工作方式：

Note the if(onChange) onChange(selectedOptions);. This makes sure that the original onChange event listener continues to run after we intercept it.

注意if(onChange) onChange(selectedOptions); 。这可以确保原始的onChange事件侦听器在我们拦截后继续运行。

Here’s what we did in the code above:

这是我们在上面的代码中所做的：

We create an onChange function that is of the same structure of the default onChange function. It's a function that receives an array of selected options.
我们创建一个onChange函数，其功能与默认onChange函数的结构相同。该函数接收选定选项的数组。
We scan through the selected options and check if it’s valid.
我们浏览选定的选项，并检查其是否有效。
If it’s invalid, show an alert and clear the input
如果无效，则显示警报并清除输入
Run the original onChange event listener
运行原始的onChange事件侦听器

Demo: https://stackblitz.com/edit/react-ravwmw

演示： https : //stackblitz.com/edit/react-ravwmw

3.修改源代码 (3. Modifying the source code)

Caution: Don’t overuse this! This is your last resort. You should only do this if there is no other choice.

注意：请勿过度使用此功能！ 这是您的不得已的方法。 仅当没有其他选择时，您才应该这样做。

If none of the above works for you, the choices you have are now limited to:

如果以上都不适合您，那么您现在只能选择以下选项：

Find another component library
查找另一个组件库
Write your own component from scratch
从头开始编写自己的组件
Modify the component’s source code
修改组件的源代码

It’s actually not uncommon that you might have to modify a package’s source code to fit a project’s needs. Especially if you’ve found a bug in a package and you need it fixed urgently.

实际上，您可能不得不修改软件包的源代码以适应项目的需求并不少见。特别是如果您在程序包中发现错误，并且需要紧急修复。

But there are a few cons:

但是有一些缺点：

Some packages use different languages like CoffeeScript or Typescript. If you don’t know the language, you don’t know how to edit it.
一些软件包使用不同的语言，例如CoffeeScript或Typescript。如果您不懂该语言，就不会编辑。
It can be time-consuming to study the source code and figure out where exactly to put your modification.
研究源代码并弄清楚将修改确切地放在哪里可能会很耗时。
You may unintentionally break some part of the package.
您可能无意间破坏了包装的某些部分。
When the package updates, you would need to apply the update manually.
软件包更新时，您将需要手动应用更新。

If you decide to go ahead and make some modifications to the source code, here’s how.

如果您决定继续对源代码进行一些修改，请按以下步骤操作。

1.分叉Github存储库 (1. Fork the Github Repository)

In our example case, go to https://github.com/ericgio/react-bootstrap-typeahead and fork the repo to your own GitHub account.

在我们的示例案例中，转到https://github.com/ericgio/react-bootstrap-typeahead并将存储库分叉到您自己的GitHub帐户。

2.将存储库克隆到您的计算机 (2. Clone the repo to your machine)

3.进行修改 (3. Make the modification)

4.将存储库推送到您的GitHub帐户 (4. Push the repo to your GitHub account)

5.安装您的仓库作为依赖 (5. Install your repo as a dependency)

After you fork the repo, your GitHub repo’s URL should be https://github.com/<your GitHub username>/react-bootstrap-typeahead.

在分叉存储库之后，您的GitHub存储库的URL应该为https://github.com/<your GitHub username>/react-bootstrap-typ eahead。

You can install this git repo as a dependency by executing this command:

您可以通过执行以下命令将此git repo安装为依赖项：

npm i https://github.com/<your GitHub username>/react-bootstrap-typeahead

After installation, you should see this in package.json:

安装后，您应该在package.json中看到以下内容：

"dependencies": {     "react-bootstrap-typeahead": "git+https://github.com/<your github username>/react-bootstrap-typeahead.git" }

结论 (Conclusion)

We talked about three ways to customize your third party React components.

我们讨论了自定义第三方React组件的三种方法。

Overwriting CSS
覆盖CSS
Using Wrapper Component
使用包装器组件
Modifying the source code
修改源代码

Hopefully, this makes your life as a React developer easier.

希望这会使您作为React开发人员的生活更加轻松。

In the meantime, let’s all take a moment and be grateful to all the open source creators/contributors out there. Without these open source packages, we wouldn’t be able to move as fast as we do today.

同时，让我们花点时间感谢所有开放源代码创建者/贡献者。没有这些开源软件包，我们将无法像今天一样快。

What’s your experience with third party component libraries? What other methods would you use to customize them? Leave a comment!

您对第三方组件库有何经验？ 您还将使用其他哪些方法来自定义它们？ 发表评论！

Originally published at dev.to.

最初发布于dev.to。