|
| 1 | +--- |
| 2 | +title: アップデート ガイド | Ignite UI for React | インフラジスティックス |
| 3 | +_description: Ignite UI for React ライブラリの新しいバージョンに更新する方法については、この記事をご覧ください。 |
| 4 | +_keywords: ignite ui for react, update, npm package, material components, アップデート, npm パッケージ, マテリアル コンポーネント |
| 5 | +_language: ja |
| 6 | +--- |
| 7 | + |
| 8 | +# アップデート ガイド |
| 9 | +Ignite UI for React バージョニング は、最初の数字がコードがサポートする React のメジャー バージョンで、2 番目の数字はメジャー バージョン リリースの数字です。重大な変更はメジャー リリースとメジャー リリースの間にリリースされる場合があります。Ignite UI for React 各リリースのすべての変更の一覧は、製品 [CHANGELOG](./general-changelog-dv-react.md) をご覧ください。 |
| 10 | + |
| 11 | + |
| 12 | +## 18.9.0 から 19.0.0 の場合 |
| 13 | +このリリースでは、一部の React コンポーネントの内部構造が大幅に再設計され、**igniteui-react** および **igniteui-react-grids** パッケージに以下の変更が加えられました。 |
| 14 | + |
| 15 | +### 一般 |
| 16 | +#### 重大な変更 |
| 17 | + |
| 18 | +- Ignite UI for React のコンポーネントは、React の関数コンポーネントを使用するようになりました。これにより、***useRef*** で取得される参照は、クラス コンポーネントのインスタンスではなく、ネイティブ要素へのフォワード参照になります。多くのユースケースでは変更なしにそのまま使用できますが、DOM 要素自体へアクセスするために追加のプロパティが不要になるなど、一部の実装には変更が必要な場合があります。 |
| 19 | +- すべてのプロパティでの代替的な文字列ユニオン タイプ (例: ***boolean | string*** や ***number | string***) の使用は、コンポーネントでサポートされなくなりました。さらに、文字列のユニオン タイプでは大文字と小文字が区別されなくなりました。 |
| 20 | + |
| 21 | +```tsx |
| 22 | +<IgrColumn dataType="String" sortable="true"></IgrColumn> |
| 23 | +``` |
| 24 | + |
| 25 | +は次のようになります: |
| 26 | + |
| 27 | +```tsx |
| 28 | +<IgrColumn dataType="string" sortable={true}></IgrColumn> |
| 29 | +``` |
| 30 | +- コンポーネント イベントには **on** というプレフィックスが付きます。つまり |
| 31 | + |
| 32 | +```tsx |
| 33 | +<IgrGrid columnPin={handlePinning}></IgrGrid> |
| 34 | +``` |
| 35 | + |
| 36 | +は次のようになります: |
| 37 | + |
| 38 | +```tsx |
| 39 | +<IgrGrid onColumnPin={handlePinning}></IgrGrid> |
| 40 | +``` |
| 41 | + |
| 42 | +- コンポーネント イベントは、最初の引数として **sender** の代わりに単一の標準 **CustomEvent** 引数を発行します。したがって、***sender.nativeElement*** などのカスタム プロパティは使用できなくなりましたが、ネイティブ イベント プロパティはすべて使用できます。また、イベント引数のタイプは特定のカスタム イベントのエイリアスとして使用できるため、***detail*** にアクセスする使用法は同じままです。新しいハンドラー シグネチャでは、***event.detail*** は同じで、***event.target*** は送信者と同等の DOM 要素になります。 |
| 43 | + |
| 44 | +```tsx |
| 45 | + const handlePinning = (sender: IgrGridBaseDirective, event: IgrPinColumnCancellableEventArgs) => {}; |
| 46 | +``` |
| 47 | + |
| 48 | +は次のようになります: |
| 49 | + |
| 50 | +```tsx |
| 51 | + const handlePinning = (event: IgrPinColumnCancellableEventArgs) => {} |
| 52 | + // equivalent to |
| 53 | + const handlePinning = (event: CustomEvent<IgrPinColumnCancellableEventArgsDetail>) => {} |
| 54 | +``` |
| 55 | +- コンポーネントには、デフォルトで非機能的な ***name*** プロパティが付与されなくなりました。***name*** プロパティは、主に **IgrInput** や **IgrCombo** などのフォーム入力コンポーネントにおいてネイティブの機能を持つため、**igniteui-react** のコンポーネントにのみ残されています。 |
| 56 | +- Ignite UI for React コンポーネントでは、React の[ドキュメント](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)に従って必要な場合を除き、***key*** プロパティは不要になりました。 |
| 57 | +- [IgrDataGrid](./grids/data-grid/overview.md) は、**igniteui-react-grids** パッケージの一部ではなくなりました。より軽量な構成を実現するため、**igniteui-react-data-grids** パッケージに移動されました。 |
| 58 | +- バージョン **18.9.0** ではクラスとして公開されていたいくつかの型は、現在ではタイプとしてエクスポート されるようになりました。これらは以下のように使用できます: |
| 59 | + |
| 60 | +```tsx |
| 61 | +const pivotConfiguration = new IgrPivotConfiguration(); |
| 62 | +``` |
| 63 | + |
| 64 | +は次のようになります: |
| 65 | + |
| 66 | +```tsx |
| 67 | +const pivotConfiguration: IgrPivotConfiguration = { |
| 68 | + rows: [], |
| 69 | + columns: [], |
| 70 | + values: [] |
| 71 | +} |
| 72 | +``` |
| 73 | + |
| 74 | +- **IgrButton** |
| 75 | + - **重大な変更** |
| 76 | + - ***clicked*** イベントは削除されました。代わりにネイティブの ***onClick*** を使用してください。 |
| 77 | +- **IgrInput** |
| 78 | + - **重大な変更** |
| 79 | + - ***inputOccurred*** イベントの名前が ***onInput*** に変更されました。 |
0 commit comments