グローバル変数

グローバル変数はReactのstateの概念に似ており、主にページのグローバル状態管理に使用されます。開発者はAPIを呼び出してグローバル状態を変更し、ページの再描画をトリガーすることもできます。

グローバル変数の作成

ユーザーはデータソースパネルの「変数追加」でグローバル変数を作成できます：

グローバル変数を作成する際、ユーザーは以下の内容を指定できます：

名称- グローバル変数の名前を宣言するために使用され、JSの変数命名規則に従う必要があります；
説明- グローバル変数の説明情報を定義し、変数バインディング時にこの説明情報を表示します；
データ- グローバル変数の初期値を設定するために使用され、文字列、ブール値、オブジェクトなどの基本的なJS型をサポートします；

ヒント

宜搭プラットフォームはデフォルトのグローバル変数urlParamsを提供し、現在のページURLのパラメータを取得するために使用されます。this.state.urlParams.xxx を通じてURLパラメータを取得でき、xxx はパラメータ名です。対応するパラメータが見つからない場合はundefinedが返されます。

API

宜搭プラットフォームはグローバル変数の読み書きに使用する2つのグローバル変数APIを提供します。

読み取り

変数バインディングおよびアクションパネルでは、以下のAPIを通じてページのグローバル変数を取得できます（変数バインディングシナリオではthisを省略し、直接state.xxxを使用できます）：

const name = this.state.name;

変更

ページのグローバル変数を変更し、ページの再描画をトリガーするためにsetState APIを提供しています（ReactのsetStateに似ています）：

this.setState({
  name: 'Jack'
});

注意

宜搭のsetState APIはReactに似ていますが、わずかな違いがあります：

宜搭のsetState APIはcallbackコールバック機能を提供しないため、stateのようにsetStateのコールバック関数を記述することはできません；
宜搭のsetState APIはリアクティブデータソリューションを採用しているため、setStateの実行後すぐに新しいstateデータを取得できます：

// setState実行前のthis.state.nameの値が「小紅」であると仮定します
this.setState({
  name: '小明'
});

// 出力される内容は：小明
console.log(this.state.name);

使用シナリオ

グローバル変数を定義した後、カスタムページには2つの消費シナリオがあります：

変数バインディング

ユーザーはコンポーネント属性の変数バインディングを設定してstateを使用できます。ユーザーは手動で記述するか、データソースを選択する方法でグローバル変数をバインドできます（変数バインディングシナリオでは、変数形式は：state.xxx）。テキストコンポーネントの内容属性バインディング変数を設定：

内容データをグローバル変数中のnameという変数にバインド：

右上隅のプレビューをクリックすると、以下のバインディング効果が表示されます：

アクション処理

アクションパネルでは、開発者はJSプログラミング方式でグローバル変数の読み書きを行うことができます：

ReactのAPIとまったく同じように見えますか？イベント処理ドキュメントも参照して、イベント処理関連の使用説明をご覧ください。

この文書は機械翻訳により生成されています。翻訳により生じた齟齬や相違点は拘束力を持たず、コンプライアンスや執行目的において法的効力はありません。

このドキュメントは役に立ちましたか？