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 システムをインストールする

推薦する

HTML5+CSS3 ヘッダー作成例と更新

前回、私たちは 2 つのヘッダー レイアウト (フレックスボックス 1 つとフロート 1 つ) を考...

Vueの監視方法のケースの詳細な説明

Vueでの監視方法時計知らせ名前: 監視する属性に同じ名前を付ける必要があります。 1. 機能Vue...

doctype のマークアップ検証

しかし最近、この方法を使用すると問題が発生することがわかりました。コードを参照してください。コードを...

モバイル端末の水平および垂直画面ビューポート検出を決定するための js のいくつかの方法

目次1. 異なるビューポートを取得する方法2. 水平画面と垂直画面のJavaScript検出3. 水...

Reactでプロキシを有効にする2つの実用的な方法

プロキシを有効にする2つの方法React には、直接使用できるカプセル化された Ajax リクエスト...

base target="" はリンクのターゲットオープンフレームを制御します

<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...

ハイパーリンクの幅と高さを直接設定できない問題の解決策

幅と高さを直接使用することはできません。 display:block; または display:in...

Linux Cron によるパラメータ付き PHP コードのスケジュール実行

1. 引き続き PHP スクリプトを使用して実行します。コマンドラインに入力: php /home/...

ウェブデザインにおける装飾要素の応用の概要

<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...

ウェブレッスンプラン、初心者向けレッスンプラン

指導トピックウェブページ適用グレード高校2年生授業時間1 クラス教科書分析焦点: 静的および動的ウェ...

react-beautiful-dnd を使用してリスト間のドラッグ アンド ドロップを実装する

目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...

MySQLデータベースエンジンをInnoDBに変更する

PS: ここではPHPStudy2016を使用しています1. 変更中にMySQLを停止する2. my...

Bootstrap Webページレイアウトグリッドの実装

目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...

MySQL空間関数を使用してロケーションパンチインを実装するための完全な手順

序文プロジェクトの要件は、ユーザーの現在の位置が特定の地理的位置範囲内にあるかどうかを判断することで...

Windows 10 Home Edition に Docker をインストールする方法

最近、プロジェクトをアップグレードするために Docker を使用しました。これまで使用したことがな...