getter での属性の連動関係の管理

HTML の属性は、JavaScript ではプロパティ割り当てに変換されます。どちらの場合も、割り当ての順序は保証されません。他の属性の存在を確認するには、getter を使用してください。

テンプレートでは getter 参照を使用します。@api getter や、別の @api プロパティの値に依存する @api setter は使用しないでください。

選択された行にチェックマークを表示する datatable コンポーネントがあるとします。互いに連動関係にある rows と selectedRows という 2 つの別々の属性があります。

1<template>
2  <c-datatable selected-rows="1,2" rows="1,2,3,4"> </c-datatable>
3</template>

属性を受け取る順序は保証されないため、getter を使用して連動関係を確認します。

1export default class Datatable extends LightningElement {
2  @track state = {};
3
4  @api
5  get rows() {
6    return this.state.rows;
7  }
8
9  set rows(value) {
10    this.state.rows = value;
11
12    // Check to see if the rows have
13    // been marked as selected.
14    if (this.state.selectedRows && !this.selectedRowsSet) {
15      this.markSelectedRows();
16      this.selectedRowsSet = true;
17    }
18  }
19
20  @api
21  set selectedRows(value) {
22    this.state.selectedRows = value;
23
24    // If rows haven’t been set,
25    // then we can't mark anything
26    // as selected.
27    if (!this.state.rows) {
28      this.selectedRowsSet = false;
29      return;
30    }
31
32    this.markSelectedRows();
33  }
34
35  get selectedRows() {
36    return this.state.selectedRows;
37  }
38
39  markSelectedRows() {
40    // Mark selected rows.
41  }
42}

getter と setter を使用することで、公開 API 契約に容易に準拠できます。コンポーネントは、@api のアノテーションが付けられたプロパティの値を変更してはいけません。

何らかの設定がその値と連動している場合 (たとえば、プログラムで要素に対して CSS クラスを付加する場合) には、setter でデータを正規化してください。元の値は getter で返します。getter でデータを正規化することもできます。こうすることで、コンシューマが何も設定していない場合でも、テンプレートは値にアクセスできます。

1@track state = {
2    selected : false
3};
4
5privateSelected = 'false';
6
7@api
8get selected() {
9    return this.privateSelected;
10}
11set selected(value) {
12    this.privateSelected = value;
13    this.state.selected = normalizeBoolean(value)
14}

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。