reactではコンポーネント式で開発されており,コンポーネントレベルが相互に値を伝達することは避けられない.現在,コンポーネント通信の方法をまとめているが,主に以下のようなものがある.
一、props属性形式による通信
props形式の通信を用いるのは,主に親子コンポーネントの階層が少ない場合である.ポップアップボックスdialogのニーズを例にとると、ポップアップボックスの外部スタイルは共通であり、ポップアップボックスの内容は異なるビジネスロジックにフォローして表示する必要がある.

// Dialog            
//    vue slot
function Dialog(props) {
  return (
    

      {props.children}
      
{props.footer}
    
  );
}
function WelcomeDialog(props) {
  return (
    

      
    
      
    react
    
  );
}
export default function(){
  const footer=  
  return          

}

上のポップアップボックスのパッケージはpropsパラメータを使用し、propsのchildrenプロパティを使用します.

propsのchildrenは、コンポーネント(上記の例)であってもよいし、配列、関数、オブジェクトなどであってもよい.childrenが配列やオブジェクトである場合の操作を容易にするためである.Reactは、childrenの操作をより容易にする一連の関数アシスタントを提供します.

最も目立つ2つの関数アシスタントはReactです.Children.mapおよびReact.Children.forEach.それらは対応する配列の場合に機能し、それ以外に関数、オブジェクト、または任意のものがchildrenとして伝達される場合にも機能します.例:radioボックスをカプセル化し、radioのnameプロパティと入力されたvalueプロパティを一致させます.

//   children
function RadioGroup(props) {
  return (
    

      {React.Children.map(props.children, child => {
        //   vdom    ，          
        return React.cloneElement(child, { name: props.name });
      })}
    
  );
}
// rest   children         ，  radio   
function Radio({children, ...rest}) {
  return (
    
      
      {children}
    
  );
}

使用方法

        vue
        react
        angular
      

props:異なるレベルのコンポーネント形式の伝達形式、親-子伝達、子-親伝達、兄弟伝達
二、コンテキストcontentによる通信
contextは、各層のコンポーネントにpropsを手動で追加する必要がなく、コンポーネントツリーでデータ伝達を行う方法context設計の目的は、コンポーネントツリーにとってグローバルなデータを共有することである.contextを使用するとpropsを使用して多層伝達を行う問題を回避できます.contextの使用は慎重にしてください.contextを使用すると、コンポーネントの多重化が悪くなります.階層的に伝達される属性を避けるには、コンポーネントの組み合わせが良い方法です.

import React, { useContext } from "react";

// 1.     
const MyContext = React.createContext();
const { Provider, Consumer } = MyContext;

function Child(prop) {
  return 
Child: {prop.foo}
;
}
//   hook  
function Child2() {
  const context = useContext(MyContext);
  return 
Child2: {context.foo}
;
}
//   class    contextType
class Child3 extends React.Component {
    //                        this.context
    static contextType = MyContext;
    render() {
        return 
Child3: {this.context.foo}
    }
}
export default function ContextTest() {
  return (
    

      
        {/*     1：Consumer */}
        {value => }
        {/*     2：hook */}
        
        {/*     3：contextType */}
        
      
    
  );
}

1、Contextの作成createContextを使用してコンテキスト(context)を作成します.このコンポーネントは、コンポーネントツリーから自分に最も近い一致するProviderから現在のcontext値を読み込みます.const MyContext = React.createContext(defaultValue); {Provider,Consumer}=MyContext作成したcontextオブジェクトから、Provider(プロバイダコンポーネント-注入値)とConsumer(コンシューマコンポーネント-取得値)2、contextの作成後、最上位レベルでProviderコンポーネントを使用してグローバル属性を注入することができます.は、サブアセンブリで取得された属性の3つの形式を取得する.

consumerコンポーネント{value => }

を使用

hook(useContext)消費

//   hook  
function Child2() {
  const context = useContext(MyContext);
  return 
Child2: {context.foo}
;
}

classを使用して静的contextType

を指定

class Child3 extends React.Component {
    //                        this.context
    static contextType = MyContext;
    render() {
        return 
Child3: {this.context.foo}
    }
}

三、高次コンポーネント
具体的には、上位コンポーネントはパラメータがコンポーネントであり、戻り値が新しいコンポーネントの関数です.高次コンポーネントはReactのAPIではなく,コンポーネント多重化の設計モードである.