Reactコンポーネント通信の詳細な説明

クラス Parent は React.Component を拡張します {
    状態 = { lastName: '王' }
    与える（） {
        戻る （
            <div>
                子コンポーネントにデータを渡します: <Child name={this.state.lastName} />
            </div>
        ）
    }
}

関数Child(props) {
	return <div>子コンポーネントはデータを受け取ります: {props.name}</div>
}

クラス Parent は React.Component を拡張します {
    州： {
      数: 100
    }
    f = (数値) => {
        console.log('サブコンポーネントデータを受信しました', num)
    }
    与える（） {
        戻る （
            <div>
            	子コンポーネント: <Child f={this.f} />
            </div>
        ）
    }
}

クラスChildはReact.Componentを拡張します。
    ハンドルクリック = () => {
      // 親コンポーネントから渡されたプロパティを呼び出し、パラメータ this.props.f(100) を渡します。
    }
    戻る （
    	<button onClick={this.handleClick}>クリックすると親コンポーネントにデータが渡されます</button>
    ）
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'react-dom' から ReactDOM をインポートします。
'./Jack' から Jack をインポートします
'./Rose' から Rose をインポートします
クラスAppはComponentを拡張します{
  // 1. 状態が親コンポーネントに昇格される state = {
    メッセージ: ''、
  }
  与える（） {
    戻る （
      <div>
        <h1>私はアプリコンポーネントです</h1>
        <ジャックは言う={this.changeMsg}></ジャック>
        2. 子コンポーネントにステータスを表示する*/
        <ローズ メッセージ = {this.state.msg}></ローズ>
      </div>
    ）
  }
  changeMsg = (メッセージ) => {
    this.setState({
      メッセージ、
    })
  }
}
// レンダリングコンポーネント ReactDOM.render(<App />, document.getElementById('root'))

React をインポートします。{ コンポーネント } を 'react' からインポートします。
デフォルトのクラスJackをエクスポートし、Componentを拡張します。
  与える（） {
    戻る （
      <div>
        <h3>私はジャックコンポーネントです</h3>
        <button onClick={this.say}>発言</button>
      </div>
    ）
  }
  言う = () => {
    this.props.say('あなたがジャンプすると私が見る')
  }
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。
デフォルトクラスRoseをエクスポートし、Componentを拡張します。
  与える（） {
    戻る （
      <div>
        <h3>私はローズコンポーネントです - {this.props.msg}</h3>
      </div>
    ）
  }
}

'react' から {createContext} をインポートします。
const { プロバイダー、コンシューマー } = createContext()

戻る （
  <プロバイダー値={ここに渡すデータを入力してください}>
  	<ルートコンポーネントの内容/>
  </プロバイダー>
）

戻る （
	<消費者>
  	{
      （データ） => {
      	// ここでのパラメータデータはプロバイダーから渡されたデータを自動的に受け取ります // console.log(data)
      	<コンポーネントコンテンツ> を返します。
    	}
    }
  </消費者>
）

'react' から {createContext} をインポートします。
const { プロバイダー、コンシューマー } = createContext()
エクスポート { コンシューマー、プロバイダー }

'./context' から { Provider } をインポートします。
与える （） {
    戻る （
      <プロバイダー値={{ num: this.state.num }}>
        <div>
          ルート コンポーネント、番号: {this.state.num}
          <親 />
          <おじさん />
        </div>
      </プロバイダー>
    ）
  }

'react' から React をインポートします
'./context' から Consumer をインポートします。
デフォルトのクラスUncleをエクスポートし、React.Componentを拡張します。
  与える （） {
    戻る （
      <消費者>
        {(データ) => {
          <div>I am Uncle コンポーネント、{data.num} を返します。
        }}
      </消費者>
    ）
  }
}