React のプロパティとは何ですか?反応属性、イベント、共有の使い方を詳しく解説-jsチュートリアル-php.cn

React のプロパティとは何ですか?反応属性、イベント、共有の使い方を詳しく解説

寻∝梦

リリース： 2018-09-11 11:38:06

オリジナル

1553 人が閲覧しました

この記事では主にreactでの属性の使い方と、reactでのイベントや共有について説明します

この記事ではReact特有のタグの使い方について主に説明しています。獲得と反応共有の使用は次のとおりです。

React コンポーネントの参照

独立した React コンポーネント間の共有操作 Mixins
1、State 属性
React のステートマシン、独自のモジュールのデータを変更するために使用されます
状態スコープのみ。現在のクラスに属し、他のモジュールを汚染しません。
Initialization: this.state = {username: “XXX”};
初期化された状態設定はコンストラクターに配置されます。 : this.setState({username: “AAA”});

概要: state はモジュール自身の属性の設定です。

2. Props 属性
props はモジュールの外部属性です (親子レベルのデータ転送)
転送方法にはパラメータ設定が必要です
: this.props.xxx;
3. イベントバインディングとデータ間の双方向の対話
3.1 イベントバインディング

最初のタイプ: this.focus = this.focus.bind( this);

またはバインディングを呼び出します: onClick={this.focus.bind(this,99)}
(bind の値はテンプレートをバインドするために使用され、99 はパラメータを渡すために使用されます)

の双方向バインディング

子ページは親ページにパラメータを渡します
子ページで呼び出すことにより親ページから渡されたイベントプロパティは、グループ間でパラメーターを転送するために使用されます

リアルタイム監視には onChange イベントを使用します

3.3 データ要求メソッド

従来の AJAX メソッド
が提供ES6 Promise

promise.then( null, function( reason ){
    /* rejection */} );// 等价于promise.catch( function( reason ){
    /* rejection */} );

ログイン後にコピー

ES6 が提供する Promise — Fetch を使用して HTTP リクエストを実装します

fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));

ログイン後にコピー

4. コンポーネントの再利用と検証

方法 1: const tables = {userid: React .PropTypes.number.isRequired}; BodyIndex.propTypes = タイプ;

方法 2: BodyIndex.propTypes = { userid: React.PropTypes.number.isRequired };
注: propTypes は v15.5 バージョンですその後、使用する環境をインストールする必要があります:

次のように導入されました: import PropTypes from 'prop-types';

Use BodyIndex.propTypes = { userid: PropTypes.number.isRequired };

使用: BodyIndex.defaultProps =defaultNum;詳細については、こちらをご覧ください。PHP 中国語 Web サイト
React リファレンスマニュアル
コラムで学習します)

4.3 コンポーネントの再利用 — パラメーターの使用
```
<BodyChild {...this.props} sex={"XXX}/>
```
ログイン後にコピー
5. コンポーネントの参照 — タグを取得する

;メソッド 2 の取得と設定: this.refs .submitButton .style.color = "red";
Refs はコンポーネント内の DOM ノードにアクセスする唯一の信頼できる方法です

Refs を乱用しないでください。
<input ref="submitButton" type="button" value="提交数据"/>6. 独立したコンポーネント間での共有操作ミックスイン
機能: 異なるコンポーネント間での共通関数とコード共有。プラグインのインポート:
「react-mixin」から ReactMixin をインポートします
「/mixin.js」から MixinLog をインポートします;
共有オブジェクトコレクション MixinLog を現在のコンポーネントプロトタイプに割り当てます: ReactMixin(BodyIndex.prototype, MixinLog);
MixinLog.log() など、さまざまなニーズに対応する関数呼び出しを行うだけです。
特徴: はページと同様のライフサイクルを持ち、が呼び出された後に数回実行されます。

7. 概要

この記事では、主に React の状態属性の使用方法とコンポーネントの検証と再利用について簡単に説明します。ダウンロード後、コマンドパネルから現在のフォルダーに移動します。 npm install を実行します。すべての環境をインストールします。インストール後、webpack –watch を実行すると、プロジェクトを実行できるようになります。

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact ユーザーマニュアルの列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がReact のプロパティとは何ですか?反応属性、イベント、共有の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。