コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > リアクションコミュニケーションにはどのような方法があるのでしょうか？

リアクションコミュニケーションにはどのような方法があるのでしょうか？

青灯夜游
リリース： 2022-03-22 14:33:19
オリジナル
5458 人が閲覧しました

React の通信メソッドには次のものが含まれます: 1. 親子コンポーネント通信に props を使用する; 2. 子親コンポーネント通信にコールバック関数を使用する; 3. 兄弟コンポーネント通信に変数プロモーションを使用する; 4. 相互通信に Context を使用する-コンポーネント通信; 5. 単一インスタンス通信にはノードのイベント モジュールを使用; 6. データ通信を共有するには redux を使用します。

リアクションコミュニケーションにはどのような方法があるのでしょうか？

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

#React の 6 つの通信メソッド

1. Props 親子通信

2. コールバック関数、親子通信
3 .変数プロモーション、兄弟コンポーネント通信
4.コンテキスト、コンポーネント間通信
5.ノードのイベントモジュールの単一インスタンス通信
6.Redux共有データ通信

1.props親子通信

function Children(props) {
      return (
        <div>
          <p>Children</p>
          <p>{props.text}</p>
        </div>
      )
    }
    function Parent() {
      return (
        <div>
          <p>Parent</p>
          <Children text="这是爸爸传给你的东西"></Children>
        </div>
      )
    }
    
    export default Parent
ログイン後にコピー

2.コールバック関数、親子通信

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.handleChange(&#39;改变了&#39;) }}>
        点击我改变爸爸传给我的东西
      </button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState(&#39;这是爸爸传给你的东西&#39;)
  function handleChange(val) {
    setText(val)
  }
  return (
    <div>
      <p>Parent</p>
      <Children handleChange={handleChange} text={text}></Children>
    </div>
  )
}
export default Parent
ログイン後にコピー

3. さまざまな昇進、兄弟間のコミュニケーション #

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <button onClick={() => { props.setText(&#39;我是Children发的信息&#39;) }}>给Children1发信息</button>
    </div>
  )
}
function Children1(props) {
  return (
    <div>
      <p>Children1</p>
      <p>{props.text}</p>
    </div>
  )
}

function App() {
  let [text, setText] = useState(&#39;&#39;)
  return (
    <>
      <div>APP</div>
      <Children setText={setText}></Children>
      <Children1 text={text}></Children1>
    </>
  )
}
export default App
ログイン後にコピー

#4. コンテキスト、グループ間のコミュニケーション

古い書き方

class Children extends React.Component {
  static contextTypes = {
    text: PropsType.string
  }
  render() {
    return (
      <div>
        <p>Children</p>
        <p>{this.context.text}</p>
      </div>
    )
  }
}

class Parent extends React.Component {
  static childContextTypes = {
    text: PropsType.string
  }
  getChildContext() {
    return {
      text: &#39;我是爸爸的信息&#39;
    }
  }
  render() {
    return (
        <div>
          <p>Parent</p>
          <Children></Children>
        </div>
    )
  }
}
export default Parent
ログイン後にコピー
新しい書き方

const { Consumer, Provider } = React.createContext()

class Children extends React.Component {
  render() {
    return (
      <Consumer>
        {
          (value) => (
            <div>
              <p>Children1</p>
              <p>{value.text}</p>
            </div>
          )
        }
      </Consumer>
    )
  }
}

class Parent extends React.Component {
  render() {
    return (
      <Provider value={{ text: &#39;我是context&#39; }}>
        <div>
          <p>Parent</p>
          <Children1></Children1>
        </div>
      </Provider>
    )
  }
}

export default Parent
ログイン後にコピー

5.単一インスタンス通信ノード

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.event.emit(&#39;foo&#39;) }}>点击我改变爸爸传给我的东西</button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState(&#39;这是爸爸传给你的东西&#39;)
  let event = new Events()
  event.on(&#39;foo&#39;, () => { setText(&#39;改变了&#39;) })
  return (
    <div>
      <p>Parent</p>
      <Children event={event} text={text}></Children>
    </div>
  )
}
export default Parent
ログイン後にコピー
注⚠️: この種の通信の場合は、先頭に events

モジュールを忘れずに導入してください。インストールする必要はありません。

node 独自のモジュール。

6.redux共有データ通信

store.js

import { createStore } from &#39;redux&#39;

let defaultState = {
    text: &#39;我是store&#39;
}

let reducer = (state = defaultState, action) => {
    switch (action) {
        default: return state
    }
}

export default createStore(reducer)
ログイン後にコピー

child.js

import React from &#39;react&#39;

import { connect } from &#39;react-redux&#39;

class Child extends React.Component {
    render() {
        return (
            <div>Child<p>{this.props.text}</p></div>
        )
    }
}

let mapStataToProps = (state) => {
    return {
        text: state.text
    }
}

export default connect(mapStataToProps, null)(Child)
ログイン後にコピー

Parent.js

class Parent extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <p>Parent</p>
          <Child></Child>
        </div>
      </Provider>
    )
  }
}

export default Parent
ログイン後にコピー

注:

redux

と

react-redux を忘れずにインストールしてください。 [関連する推奨事項: Redis ビデオ チュートリアル

]

以上がリアクションコミュニケーションにはどのような方法があるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
react 通信
ソース：php.cn
前の記事：反応状態コンポーネントとは何ですか? 次の記事：React はデータをリクエストするためにどのフックを使用しますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか? FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。このコードペン (間違ったコードですみません。ただいじっているだけです) で、sleep ...
から 2024-04-06 16:29:50
0
2
490
無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...
から 2024-04-06 16:25:39
0
1
346
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート