- tw511教學網

距離 v4 的第一個版本已經有接近兩年的時間了，在這段時間裡 v4 一共迭代了 30 多個版本，新增了許多特性。有越來越多的開發者開始使用 React Suite，並且參與功能開發與改進。還有一直對我們提出寶貴建議的開發者們，我們再次表示感謝。希望 React Suite 能夠陪伴您的產品持續成長，同時也希望能夠服務到更多的開發者。

React Suite 5 提升了元件可存取性以及提供了更豐富可客製化化的元件。以下將詳細介紹新增特性以及如何從 4.x 升級到 5.0。

主要功能 ✨

提升可存取(Accessibility)

我們的希望可以讓更多的使用者在 React Suite 開發的產品上無障礙的使用。我們會在鍵盤操作、讀屏裝置等多個場景去改善 React Suite 提供的每一個元件。

無障礙設計

React Suite 遵循標準，對所有元件進行了重構，均具有開箱即用的適當屬性和鍵盤互動功能。

新增一套高對比度主題

在 React Suite v4 我們參照標準對顏色對比度的要求，對元件做了很大的改進，可以滿足大多數使用者。我們還是希望在此基礎上進行提升，並照顧到一小部分在視力上存在障礙的人群。目前 React Suite 官方一共提供了。

採用 SVG Icon 代替 Icon font

Icon font 存在存在一些渲染上問題，導致圖示模糊，需要載入字型檔案，內容區域閃爍等問題。為了更好的可存取性(Accessibility)，我們決定優先採用 SVG Icon 。並且能夠友好的相容第三方的圖示資源。

import GearIcon from "@rsuite/icons/Gear";

render(<GearIcon />);

// output
<svg>
  <path d="M11.967 ..."></path>
  <path d="M8 10a2 2 0 10.001-3.999A2 2 0 008 10zm0 1a3 3 0 110-6 3 3 0 010 6z"></path>
</svg>;

支援 CSS 變數

當前主流的瀏覽器都已經支援 CSS 變數，我們計劃提供一套元件 CSS 變數設定，可以更方便的做主題自定義，主題切換。

採用函陣列件重構

我們採用函陣列件重構大部分的元件，採用 React Hooks 所帶來的新特性，提升開發體驗。

按需載入

在 v4 中匯入元件的時候需要區分是 cjs 還是 esm 。在 v5 中這是自動的。

// v4: cjs
import Button from "rsuite/lib/Button";
// v4: esm
import Button from "rsuite/es/Button";

// v5
import Button from "rsuite/Button";

對 Form 表單的改進

改進 Form 在純文字檢視的效果。
對元件進行重新命名。

`FormGroup` 重新命名為 `Form.Group`
`FormControl` 重新命名為 `Form.Control`
`ControlLabel` 重新命名為 `Form.ControlLabel`
`ErrorMessage` 重新命名為 `Form.ErrorMessage`
`HelpBlock` 重新命名為 `Form.HelpText`

表單校驗支援物件結構。

const model = SchemaModel({
  username: StringType().isRequired("Username required"),
  tags: ArrayType().of(StringType("The tag should be a string").isRequired()),
  role: ObjectType.shape({
    name: StringType().isRequired("Name required"),
    permissions: ArrayType().isRequired("Permissions required"),
  }),
});

const checkResult = model.check({
  username: "foobar",
  tags: ["Sports", "Games", 10],
  role: { name: "administrator" },
});

console.log(checkResult);

輸出的資料結構:

{
  username: { hasError: false },
  tags: {
    hasError: true,
    array: [
      { hasError: false },
      { hasError: false },
      { hasError: true, errorMessage: 'The tag should be a string' }
    ]
  },
  role: {
    hasError: true,
    object: {
      name: { hasError: false },
      permissions: { hasError: true, errorMessage: 'Permissions required' }
    }
  }
};

詳細的使用教學請閱讀: 與

Avatar 新增支援 srcSet 、sizes 、imgProps 屬性

srcSet: <img> 元素的 srcSet 屬性。使用此屬性進行響應式影象顯示。
sizes: <img> 元素的 sizes 屬性。
imgProps: 如果該元件用於顯示影象，則應用於 <img> 元素的屬性。

Slider 和 RangeSlider 支援 `onChangeCommitted`

onChangeCommitted 和 onChange 不同的點在於，onChange 是每一次值的改變都會觸發，而 onChangeCommitted 是在 mouseup 事件觸發後並且值發生了改變而觸發的的回撥。

DatePicker 和 DateRangePicker 功能改進

DatePicker 與 DateRangePicker 支援鍵盤輸入。
DateRangePicker 之前只能選擇日期，在 v5 中可以選擇時間。

<DateRangePicker format="yyyy-MM-dd HH