React でのコンポーネント通信にはどのような方法がありますか?

この記事では、React でのコンポーネント通信のいくつかの方法を、サンプル コードを通じて詳しく紹介します。必要な方は、以下のエディターをフォローして学習してください。一緒に。

はじめに

React を使い始めたばかりの場合、React の一方向データフローの特性により、コンポーネント間の通信で問題が発生する可能性があります。以下の記事で詳しく紹介しています。開始前の画像:

反応コンポーネント通信

• コンポーネントが通信する必要があるいくつかの状況

• 親コンポーネントが子コンポーネントと通信

• 子コンポーネントが親コンポーネントと通信

• レベルコンポーネント間の通信

• コンポーネント間のネストされた関係の通信はありません

Reactのデータフローは一方向であり、親コンポーネントは子コンポーネントと通信します。コンポーネントは、propsChild.jsx

import React from 'react';
import PropTypes from 'prop-types';
export default function Child({ name }) {
 return <h1>Hello, {name}</h1>;
}
Child.propTypes = {
 name: PropTypes.string.isRequired,
};

Parent.jsx

import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
 render() {
  return (
   <p>
    <Child name="Sara" />
   </p>
  );
 }
}
export default Parent;

2を介して必要な情報を子コンポーネントに渡します。子コンポーネントはコールバック関数

を使用して親コンポーネントと通信します。カスタムイベント機構

コールバック関数

• を利用して、子コンポーネント

List3.jsx

• import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  class List3 extends Component {
   static propTypes = {
    hideConponent: PropTypes.func.isRequired,
   }
   render() {
    return (
     <p>
      哈哈,我是List3
      <button onClick={this.props.hideConponent}>隐藏List3组件</button>
     </p>
    );
   }
  }
  export default List3;

  App、jsx

  import React, { Component } from 'react';
  import List3 from './components/List3';
  export default class App extends Component {
   constructor(...args) {
    super(...args);
    this.state = {
     isShowList3: false,
    };
   }
   showConponent = () => {
    this.setState({
     isShowList3: true,
    });
   }
   hideConponent = () => {
    this.setState({
     isShowList3: false,
    });
   }
   render() {
    return (
     <p>
      <button onClick={this.showConponent}>显示Lists组件</button>
      {
       this.state.isShowList3 ?
        <List3 hideConponent={this.hideConponent} />
       :
       null
      }
     </p>
    );
   }
  }

のコンポーネント非表示ボタンをクリックすることで自身を非表示にする機能を実現します。コールバック関数は内部状態を変換する従来の関数であるため、setState は通常コールバック関数とペアで使用されることがわかります。クロスレベルコンポーネント通信

レイヤーごとにプロパティをコンポーネントに転送

たとえば、コンポーネントAとコンポーネントBが通信したい場合、まずAとBの共通の親コンポーネントを見つけます。Aは最初にコンポーネントと通信します。 C であり、コンポーネント C は props を通じてコン​​ポーネント B と通信します。このとき、C コンポーネントはミドルウェアの役割を果たします

コンテキストを使用します

コンテキストは、どこからでもアクセスできるグローバル変数です。伝達する情報をコンテキストに配置し、他のコンポーネントから任意に取得できます ただし、レイヤーごとの転送を減らすことはできますが、React は公式に大量のコンテキストの使用を推奨していません。コンポーネントの構造が複雑な場合、コンテキストがどこから渡されるのかがわかりません。また、コンテキストがグローバル変数である場合、グローバル変数はアプリケーションを混乱させる原因になります。

コンテキストを使用する

次の例の関係: ListItem は List のサブコンポーネントであり、List は app

ListItem.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class ListItem extends Component {
 // 子组件声明自己要使用context
 static contextTypes = {
  color: PropTypes.string,
 }
 static propTypes = {
  value: PropTypes.string,
 }
 render() {
  const { value } = this.props;
  return (
   <li style={{ background: this.context.color }}>
    <span>{value}</span>
   </li>
  );
 }
}
export default ListItem;

List.jsx

import ListItem from './ListItem';
class List extends Component {
 // 父组件声明自己支持context
 static childContextTypes = {
  color: PropTypes.string,
 }
 static propTypes = {
  list: PropTypes.array,
 }
 // 提供一个函数,用来返回相应的context对象
 getChildContext() {
  return {
   color: 'red',
  };
 }
 render() {
  const { list } = this.props;
  return (
   <p>
    <ul>
     {
      list.map((entry, index) =>
       <ListItem key={`list-${index}`} value={entry.text} />,
      )
     }
    </ul>
   </p>
  );
 }
}
export default List;

app.jsx

import React, { Component } from 'react';
import List from './components/List';
const list = [
 {
  text: '题目一',
 },
 {
  text: '题目二',
 },
];
export default class App extends Component {
 render() {
  return (
   <p>
    <List
     list={list}
    />
   </p>
  );
 }
}

のサブコンポーネントです。ネスト関係なしのコンポーネント通信

4。

カスタム イベント メカニズムを使用します

コンポーネントがマウントされている場合は、componentDidMount イベントでイベントをサブスクライブします。コンポーネントがアンロードされたら、componentWillUnmount イベントでイベント サブスクリプションをキャンセルします。例としてモデルをサブスクライブし、それを実装するために Node.js イベント モジュールのブラウザー バージョンを借用します

カスタム イベントを使用します

次の例のコンポーネント関係: List1 と List2 には入れ子関係がありません。App はそれらの親ですコンポーネント; このような機能を実現します: List2 のボタンをクリックして List1 の情報表示を変更します最初に項目が必要です: events パッケージを次の場所にインストールします:

npm install events --save

src の下に新しい util ディレクトリを作成し、events.js を作成します

import { EventEmitter } from 'events';
export default new EventEmitter();

list1.jsx

import React, { Component } from 'react';
import emitter from '../util/events';
class List extends Component {
 constructor(props) {
  super(props);
  this.state = {
   message: 'List1',
  };
 }
 componentDidMount() {
  // 组件装载完成以后声明一个自定义事件
  this.eventEmitter = emitter.addListener('changeMessage', (message) => {
   this.setState({
    message,
   });
  });
 }
 componentWillUnmount() {
  emitter.removeListener(this.eventEmitter);
 }
 render() {
  return (
   <p>
    {this.state.message}
   </p>
  );
 }
}
export default List;

List2.jsx

import React, { Component } from 'react';
import emitter from '../util/events';
class List2 extends Component {
 handleClick = (message) => {
  emitter.emit('changeMessage', message);
 };
 render() {
  return (
   <p>
    <button onClick={this.handleClick.bind(this, &#39;List2&#39;)}>点击我改变List1组件中显示信息</button>
   </p>
  );
 }
}

APP.jsx

import React, { Component } from 'react';
import List1 from './components/List1';
import List2 from './components/List2';
export default class App extends Component {
 render() {
  return (
   <p>
    <List1 />
    <List2 />
   </p>
  );
 }
}

カスタムイベントは典型的なパブリッシュとサブスクライブのパターンであり、コンポーネント間の通信は、イベントオブジェクトにリスナーを追加し、イベントをトリガーすることで実現されます概要

親コンポーネントは子コンポーネントと通信します: props

子コンポーネントが親コンポーネントと通信します: コールバック関数/self イベントを定義します

クロスレベルコンポーネント通信: レイヤーごとのコンポーネントは props/context を渡します

ネストされた関係はありません コンポーネント間の通信: カスタム イベント

コンポーネント間で通信する場合、主にビジネスに依存します 特定のニーズに応じて、最も適切なものを選択します;

• ビジネス ロジックが特定のレベルに達したら、次のことを検討できますMobx や Redux などの状態管理ツールの紹介

以上、皆様のお役に立てれば幸いです。

• 関連記事:

• JavaScriptでのマップデータ構造の詳細な解釈

• JavaScriptを使用してカスタムイベントメカニズムを実装する方法

vueを使用してログイン登録とトークン検証を実装する方法

方法vue を使用してトークン検証を実装します

以上がReact でのコンポーネント通信にはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。