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。