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

この記事では主に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 はパラメータを渡すために使用されます)
3.2 親から子に渡されるデータ

の双方向バインディング

• 子ページは親ページにパラメータを渡します

• 
  

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

• リアルタイム監視には 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. コンポーネントの再利用と検証

4.1 Props の検証

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

• 方法 2: BodyIndex.propTypes = { userid: React.PropTypes.number.isRequired };

• 注: propTypes は v15.5 バージョンですその後、使用する環境をインストールする必要があります:
npm install prop-types –save

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

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

4.2 デフォルトの Props 値
定義: const defaultNum = {username: "デフォルト名"};

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

  コラムで学習します)

• 4.3 コンポーネントの再利用 — パラメーターの使用

  <BodyChild {...this.props} sex={"XXX}/>

  5. コンポーネントの参照 — タグを取得する
方法 1 : タグを取得する元の方法: var myButton = document.getElementById("submitButton"); myButton.style.color = "red";
方法 2: ラベルに ref 属性を設定します:

• ;メソッド 2 の取得と設定: this.refs .submitButton .style.color = "red";

• Refs はコンポーネント内の DOM ノードにアクセスする唯一の信頼できる方法です

コードが終了すると、Refs はサブコンポーネントへの元の参照を自動的に破棄します
レンダリングする前に Refs を呼び出さないでください

• 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 サイトの他の関連記事を参照してください。