反応する子が親と通信する方法は何ですか?

反応子コンポーネントが親コンポーネントと通信するには、コールバック関数とカスタム イベント メカニズムの 2 つの方法があります。しかし、カスタム イベントを使用するのは明らかに複雑すぎる場合があるため、一般的にはコールバック関数が使用され、親コンポーネントはコールバック関数をあらかじめ用意しておき、そのコールバック関数を子コンポーネントに渡すと、子コンポーネントはコールバック関数を呼び出して親コンポーネントと通信します。

このチュートリアルの動作環境: Windows7 システム、react16 バージョン この方法は、すべてのブランドのコンピューターに適しています。

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

React では、子コンポーネントは 2 つのメソッドを使用して親コンポーネントと通信します。

1. コールバック関数を使用する: これは JavaScript の柔軟性と利便性により、実行時のステータスを取得できます。

2. カスタム イベント メカニズムを使用する: この方法はより汎用性があり、広く使用されています。コンポーネントを設計するときに、イベント メカニズムの追加を検討すると、多くの場合、コンポーネント API が簡素化されます。

しかし、カスタム イベントを使用するのは明らかに複雑すぎる場合があるため、目的を達成するためには、より単純な方法が選択されるのが一般的です。

子コンポーネントは通常、コールバック関数を使用して親コンポーネントと通信します。親コンポーネントは事前にコールバック関数を定義し、そのコールバック関数を子コンポーネントに渡します。子コンポーネントはコールバック関数を呼び出して親コンポーネントと通信します。 。

#コールバック関数

子コンポーネントの非表示コンポーネントボタンをクリックすることで自身を非表示にする機能を実現

List3.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List3 extends Component {    
static propTypes = {        
        hideConponent: PropTypes.func.isRequired,
    }
    render() {      
      return (            
          <div>
                哈哈,我是List3               
                 <button onClick={this.props.hideConponent}>隐藏List3组件</button>
            </div>
        );
    }
}
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 (           
             <div>
                <button onClick={this.showConponent}>显示Lists组件</button>
                {
                    this.state.isShowList3 ?<List3 hideConponent={this.hideConponent} />:null
                }            
             </div>
        );
    }
}

実装方法を見ると、従来のコールバック関数の実装方法と同じであることがわかります。また、setState は通常、コールバック関数とペアで表​​示されます。関数は内部状態を変換する関数です。関数の伝統;

プログラミング関連の知識については、

プログラミング学習をご覧ください。 ！

以上が反応する子が親と通信する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。