レンダリング一意識別子（key） - DingTalk Help Center

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

1. 概要と設定パス

レンダリング一意識別子（key）は、Reactにおけるコンポーネントのkey属性と同じ原理で動作します。いずれもレンダリング時やコンポーネント切り替え時に、コンポーネントを一意に識別するためのものです。パス：カスタムページで任意のコンポーネントをクリック >> 右側のプレミアム >> レンダリング有無 >> レンダリング一意識別子。この設定は通常、レンダリング有無およびループ機能と組み合わせて使用します。カスタムページ

2. ユースケース

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

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

変数データソースhobbyを追加します。
好きなゲームのフォーム識別子をgameに設定し、レンダリング有無を変数state.hobby === 'Games'にバインドします。
好きなスポーツのフォーム識別子をsportに設定し、レンダリング有無を変数state.hobby === 'Sports'にバインドします。
趣味に対してonChangeアクションを設定します。

export function onChagne({ value, actionType, item }) {
  this.setState({
  	hobby: value,
  });
}

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

export function submit() {
	console.log(this.$('form').getValue());
}

上記の設定（レンダリング一意識別子を設定しない状態）では、趣味を切り替えると下部のテキストボックスも入れ替わります。しかし、データを送信すると、スポーツを選択している場合でもsportフィールドに好きなゲームの値が入ってしまいます。原因：テキストボックスコンポーネントを切り替える際、keyが設定されていないと、内部フレームワークが切り替え前のコンポーネントを「再利用」してしまうためです。これを解消するには、両方のコンポーネントにレンダリング一意識別子を設定します。