반응하는 아이가 부모와 소통하는 방법은 무엇입니까?

React 하위 구성요소가 상위 구성요소와 통신하는 방법에는 콜백 함수와 사용자 정의 이벤트 메커니즘의 두 가지가 있습니다. 그러나 때로는 사용자 정의 이벤트를 사용하는 것이 너무 복잡하기 때문에 일반적으로 상위 구성요소는 콜백 함수를 미리 정의하고 콜백을 보냅니다. 하위 구성 요소에 함수가 전달되고, 하위 구성 요소는 콜백 함수를 호출하여 상위 구성 요소와 통신합니다.

이 튜토리얼의 운영 환경: windows7 시스템, React16 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

React 하위 구성 요소는 상위 구성 요소와 통신합니다

React에서 하위 구성 요소는 두 가지 방법을 사용하여 상위 구성 요소와 통신합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!