React 親コンポーネントと子コンポーネント間の値転送の詳細な紹介

この記事では主にreact親コンポーネントと子コンポーネント間の値の受け渡し方法を紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう

概念的には、コンポーネントは閉じられた環境です。 React は一方向のデータ フロー設計になっており、親コンポーネントのみが子コンポーネントにデータを渡します。正しい技術仕様があれば、所有者コンポーネントは所有者コンポーネントにデータを設定できます。

それでは、子コンポーネントはどのようにして親コンポーネントと通信するのでしょうか? 簡単に言えば、メソッド (関数) が親コンポーネント内で設定され、子コンポーネントの props に渡されるということです。子コンポーネント イベント発生時に、このpropsで設定したメソッド(関数)を直接呼び出します。しかし、途中で誰か（オブジェクト）が関数設定を呼び出すのがこれの役割です。

props を使用して親コンポーネントを子コンポーネントに設定し、子コンポーネントから親コンポーネントに上記のメソッドを使用します。これは基本的なルーチンですが、非常に面倒で柔軟性に欠けるため、単純なコンポーネント構造にのみ適用されます。したがって、サブコンポーネント間で通信するのはそれほど簡単ではありません。もちろん、複雑なアプリケーションでは、この問題を解決するには、flux または redux を追加で使用する必要がある、ということを聞いたことがあると思います。

ただし、React アプリケーションの全体的な設計を考えるときは、グローバルな状態であるアプリケーション ドメインの状態の概念を理解する必要があります。 1 つ目はアプリケーション ドメインの状態です。これは通常、子コンポーネントではなく親コンポーネント内にあります。多くの子コンポーネントがあり、それらはツリー構造の奥深くに位置します。

例:

子コンポーネント

import React, { Component } from 'react'

export default class Item extends Component {
 constructor(props) {
  super(props)

  this.state = {
   prices: 0
  }
 }

 handleChange(){
  const prices =800;
  this.setState({
   prices: price
  })
  //用传过来的changePrice属性(props)，是个函数，呼叫它把price交给父组件中的函数去处理
  this.props.changePrice(price)
 }

 render() {
  const { prices } = this.state;
    return (
     <p>
       <p onChange={this.handleChange.bind(this)}>
       </p>
       <p>{prices}</p>
     </p>
    )
 }
}

親コンポーネント

import React, { Component } from 'react';
import Item from './Item'

class App extends Component {
 constructor(props) {
  super(props)

  this.state = {price: 0}
 }
 
 //给子组件用来传price用的方法
 changePrice(price){
  this.setState({price: price})
 }

 render() {
  return (
   <p>
    <Item changePrice={this.changePrice.bind(this)}/>
    <p>{this.state.price}</p>
   </p>
  );
 }
}

export default App;

以上がReact 親コンポーネントと子コンポーネント間の値転送の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。