React 非親子コンポーネントパラメータ渡しのサンプルコード

React 非親子コンポーネントパラメータ渡しのサンプルコード

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。

React は主に UI の構築に使用され、React は MVC の V (ビュー) であると考える人が多いです。

React は Facebook の社内プロジェクトとして始まり、Instagram の Web サイトの構築に使用され、2013 年 5 月にオープンソース化されました。

React はパフォーマンスが高く、コードロジックも非常にシンプルなため、注目して使用する人が増えています。

Reactの機能

1. 宣言型設計 − React は、アプリケーションの記述を容易にする宣言型パラダイムを使用します。

2. 効率性 - React は DOM をシミュレートすることで DOM とのやり取りを最小限に抑えます。

3. 柔軟性 − React は既知のライブラリやフレームワークとうまく連携します。

4.JSX − JSX は JavaScript 構文の拡張です。 React 開発では JSX の使用は必須ではありませんが、推奨されます。

5. コンポーネント − React を使用してコンポーネントを構築すると、コードの再利用が容易になり、大規模プロジェクトの開発にも適用できます。

6. 一方向のレスポンシブなデータフロー − React は一方向のレスポンシブなデータフローを実装しており、コードの重複が削減されるため、従来のデータバインディングよりもシンプルです。

以下は、React の非親子コンポーネントパラメータ渡しのコード例です。具体的な内容は以下のとおりです。

新バージョン: クロスレベルパラメータ受け渡しの主な目的は、各レベルで値を割り当てることを避けることと、dvaの使用を避けることです。

'react' から React をインポートします
const {プロバイダー、コンシューマー} = React.createContext('default')
デフォルトのクラスContextDemoをエクスポートし、React.Componentを拡張します。
    状態={
        新しいコンテキスト:'createContext'
    }
  与える() {
      const { newContext } = this.state
    戻る (
        <プロバイダー値={newContext}>
            <div>
                <label>子コンテンツ</label>
                <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/>
            </div>
            <息子 />
        </プロバイダー>
    )
  }
}
クラスSonはReact.Componentを拡張します{
    与える(){
        返す <消費者>
            {
                (名前)=>
                    <div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}>
                        <p>サブコンポーネントによって取得されたコンテンツ: {name}</p>
                        <孫 />
                    </div>
                
            }
        
        </消費者>
    }
}
GrandsonクラスはReact.Componentを拡張します{
    与える(){
        返す <消費者>
            {
                (名前)=>
                    <div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}>
                        <p>孫コンポーネントによって取得されたコンテンツ: {name}</p>
                    </div>
                
            }
        
        </消費者>
    }
}

古いプロジェクトメソッドも導入され、prop-typesが使用される。

'react' から React をインポートします
'prop-types' から PropTypes をインポートします
クラスContextDemoはReact.Componentを拡張します。
    // 子コンテキストを取得する
    状態={
        新しいコンテキスト:'createContext'
    }
    子コンテキストを取得する(){
        {値:this.state.newContext} を返します
    }
  与える() {
      const { newContext } = this.state
    戻る (
            <div>
                <div>
                    <label>子コンテンツ</label>
                    <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/>
                </div>
                <息子 />
            </div>
    )
  }
}
クラスSonはReact.Componentを拡張します{
    与える(){
        <div> を返す
            <p>子:{this.context.value}</p>
        </div>
    }
}
Son.contextTypes = {
    値:PropTypes.文字列
}
ContextDemo.childContextTypes = {
    値:PropTypes.文字列
}
エクスポートデフォルト()=> 
  <コンテキストデモ>
  
  </コンテキストデモ>

参照

'react' から React をインポートします

// 関数コンポーネントもref経由でdomを取得したい
const TargetFunction = React.forwardRef((props, ref) => (
    <input type="text" ref={ref}/>
))
デフォルトのクラスFrodWordRefDemoをエクスポートし、React.Componentを拡張します。
  コンストラクタ() {
    素晴らしい()
    this.ref = React.createRef()
  }

  コンポーネントマウント() {
    this.ref.current.value = 'ref 入力を取得'
  }

  与える() {
    <TargetFunction ref={this.ref}> を返します
    </ターゲット関数>
  }
}

pubsubjs の

'react' から React をインポートします
'pubsub-js' から PubSub をインポートします
デフォルトのクラスBroをエクスポートし、React.Componentを拡張します{
    状態 = {
        価値:''
    }

    与える(){
        const {値} = this.state
        PubSub.subscribe('SOS',(res,data)=>{
            this.setState({
                値:データ
            })
        })
        戻る (
            <div>
                <h1>{value}</h1> を受け取りました
            </div>
        )
    }
}
'react' から React をインポートします
'pubsub-js' から PubSub をインポートします
デフォルトのクラスChildrenをエクスポートし、React.Componentを拡張します{
    状態 = {
        価値:''
    }
    ハンドルチェンジ = (e) => {
        this.setState({
            値:e.target.value
        })
    }
    送信 = () => {
        const {値} = this.state
        PubSub.publish('SOS',値)
    }
    与える(){
        const {値} = this.state
        戻る (
            <div>
                <input type="text" value={value} onChange={this.handelChange}/>
                <button onClick={this.send}>送信</button>
            </div>
        )
    }
}

React非親子コンポーネントパラメータ受け渡しのサンプルコードに関する記事はこれで終了です。React非親子コンポーネントパラメータ受け渡しに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)
  • React親子コンポーネント通信実装方法
  • 親コンポーネントと子コンポーネント間で値を渡すReactメソッド
  • 親コンポーネントと子コンポーネント間のReact通信プロパティ
  • Reactの親子コンポーネント転送とその他の重要なポイントの詳細な説明
  • react.js 親子コンポーネント データ バインディング リアルタイム通信 サンプル コード
  • React親子コンポーネント値転送(コンポーネント通信)実装方法

<<:  MySQL における explain の役割の詳細な説明

>>:  VMware Workstation 14 Pro に Win10 システムをインストールする

推薦する

editplus の Zen コーディング例コードの説明

たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...

ショッピングカートのスライド削除効果を実装するReactネイティブサンプルコード

基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...

CSSインジェクションの知識の要約

最近のブラウザでは、CSS 内で JavaScript を実行することはできなくなりました。以前は、...

WeChatアプレットがSMS認証コード送信のカウントダウンを実装

この記事では、WeChatアプレットがSMS認証コードのカウントダウンを送信するための具体的なコード...

CSS変数がJSインタラクティブコンポーネント開発にもたらす改善と変更のサンプルコードの詳細な説明

1. CSS変数がもたらす質的変化CSS 変数によってもたらされる改善は、CSS コードの節約や C...

MySQL双方向バックアップの実装方法

MySQL 双方向バックアップはマスター-マスター バックアップとも呼ばれ、両方の MySQL サー...

MySQL トリガーの定義と使用方法の簡単な例

この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...

HTML コードを書くための 30 のヒント

1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...

HTML テーブル マークアップ チュートリアル (29): セルのライト境界線の色属性 BORDERCOLORLIGHT

セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...

Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー

目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...

MySQLは1つのテーブルからデータをクエリし、それを別のテーブルに挿入する実装方法

MySQLは1つのテーブルからデータをクエリし、それを別のテーブルに挿入する実装方法ウェブサイト開発...

div要素に丸い境界線を追加する方法

以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...

DockerでRabbitMqの共通クラスタとミラークラスタを構築する詳細な操作

目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....

外部ネットワークアクセスを許可するためのMysql5.6の設定手順の詳細を共有する

最近、MySQL 5.6 を導入しましたが、デフォルトでは MySQL はローカル サービスのみを許...