> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# レンダリング一意識別子（key）

> DingTalk YiDAのカスタムページで使用するレンダリング一意識別子（key）の設定方法を解説します。同一タイプのコンポーネントを切り替える際に発生するデータ不整合を防ぎ、コンポーネントの再利用による不具合を回避する手順を紹介します。

| **機能**  | **Freeプラン** | **ベーシック版** | **プロフェッショナル版** | **専用版** |
| ------- | ----------- | ---------- | -------------- | ------- |
| カスタムページ | 非対応         | 非対応        | 対応             | 対応      |

## 1. 概要と設定パス

レンダリング一意識別子（key）は、Reactにおけるコンポーネントのkey属性と同じ原理で動作します。いずれもレンダリング時やコンポーネント切り替え時に、コンポーネントを一意に識別するためのものです。

**パス**：カスタムページで任意のコンポーネントをクリック >> 右側の**プレミアム** >> **レンダリング有無** >> **レンダリング一意識別子**。

この設定は通常、**レンダリング有無**および**ループ**機能と組み合わせて使用します。

カスタムページ

## 2. ユースケース

### 2.1 同一タイプのコンポーネントの切り替え

以下のシナリオでは、**趣味**を**ゲーム**に設定した場合は**好きなゲーム**を表示し、**趣味**を**スポーツ**に設定した場合は**好きなスポーツ**を表示します。

設定手順は以下のとおりです。

1. 変数データソース`hobby`を追加します。

2. **好きなゲーム**のフォーム識別子を`game`に設定し、**レンダリング有無**を変数`state.hobby === 'Games'`にバインドします。

3. **好きなスポーツ**のフォーム識別子を`sport`に設定し、**レンダリング有無**を変数`state.hobby === 'Sports'`にバインドします。

4. **趣味**に対して`onChange`アクションを設定します。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onChagne({ value, actionType, item }) {
  this.setState({
  	hobby: value,
  });
}
```

5. **送信**ボタンに`onClick`アクションをバインドします。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function submit() {
	console.log(this.$('form').getValue());
}
```

上記の設定（レンダリング一意識別子を設定しない状態）では、趣味を切り替えると下部のテキストボックスも入れ替わります。しかし、データを送信すると、**スポーツ**を選択している場合でも`sport`フィールドに**好きなゲーム**の値が入ってしまいます。

原因：**テキストボックスコンポーネントを切り替える際、keyが設定されていないと、内部フレームワークが切り替え前のコンポーネントを「再利用」してしまうためです。**

これを解消するには、両方のコンポーネントに**レンダリング一意識別子**を設定します。