アップデート ガイド
Ignite UI for React バージョニング は、最初の数字がコードがサポートする React のメジャー バージョンで、2 番目の数字はメジャー バージョン リリースの数字です。重大な変更はメジャー リリースとメジャー リリースの間にリリースされる場合があります。Ignite UI for React 各リリースのすべての変更の一覧は、製品 CHANGELOG をご覧ください。
18.9.0 から 19.0.0 の場合
このリリースでは、一部の React コンポーネントの内部構造が大幅に再設計され、igniteui-react および igniteui-react-grids パッケージに以下の変更が加えられました。
一般
重大な変更
- Ignite UI for React のコンポーネントは、React の関数コンポーネントを使用するようになりました。これにより、useRef で取得される参照は、クラス コンポーネントのインスタンスではなく、ネイティブ要素へのフォワード参照になります。多くのユースケースでは変更なしにそのまま使用できますが、DOM 要素自体へアクセスするために追加のプロパティが不要になるなど、一部の実装には変更が必要な場合があります。
- すべてのプロパティでの代替的な文字列ユニオン タイプ (例: boolean | string や number | string) の使用は、コンポーネントでサポートされなくなりました。さらに、文字列のユニオン タイプでは大文字と小文字が区別されなくなりました。
<IgrColumn dataType="String" sortable="true"></IgrColumn>は次のようになります:
<IgrColumn dataType="string" sortable={true}></IgrColumn>- コンポーネント イベントには on というプレフィックスが付きます。つまり
<IgrGrid columnPin={handlePinning}></IgrGrid>は次のようになります:
<IgrGrid onColumnPin={handlePinning}></IgrGrid>- コンポーネント イベントは、最初の引数として
senderの代わりに単一の標準 CustomEvent 引数を発行します。したがって、sender.nativeElement などのカスタム プロパティは使用できなくなりましたが、ネイティブ イベント プロパティはすべて使用できます。また、イベント引数のタイプは特定のカスタム イベントのエイリアスとして使用できるため、detailにアクセスする使用法は同じままです。新しいハンドラー シグネチャでは、event.detailは同じで、event.targetは送信者と同等の DOM 要素になります。
const handlePinning = (sender: IgrGridBaseDirective, event: IgrPinColumnCancellableEventArgs) => {};は次のようになります:
const handlePinning = (event: IgrPinColumnCancellableEventArgs) => {}
// equivalent to
const handlePinning = (event: CustomEvent<IgrPinColumnCancellableEventArgsDetail>) => {}- コンポーネントには、デフォルトで非機能的な
nameプロパティが付与されなくなりました。nameプロパティは、主にIgrInputやIgrComboなどのフォーム入力コンポーネントにおいてネイティブの機能を持つため、igniteui-react のコンポーネントにのみ残されています。 - Ignite UI for React コンポーネントでは、React のドキュメントに従って必要な場合を除き、
keyプロパティは不要になりました。 - IgrDataGrid は、igniteui-react-grids パッケージの一部ではなくなりました。より軽量な構成を実現するため、igniteui-react-data-grids パッケージに移動されました。
- バージョン 18.9.0 ではクラスとして公開されていたいくつかの型は、現在ではタイプとしてエクスポート されるようになりました。これらは以下のように使用できます:
const pivotConfiguration = new IgrPivotConfiguration();は次のようになります:
const pivotConfiguration: IgrPivotConfiguration = {
rows: [],
columns: [],
values: []
}