외부 라이브러리 없이 React에서 하위 구성 요소가 상위 상태를 어떻게 업데이트할 수 있나요?

React의 상위-하위 상태 관리

React 애플리케이션에서는 하위 구성 요소가 상위의 상태를 업데이트해야 하는 시나리오가 발생할 수 있습니다. props는 기본적으로 불변이지만 Redux와 같은 외부 라이브러리를 사용하지 않고도 이 기능을 구현할 수 있는 방법이 있습니다.

솔루션 접근 방식

자녀-부모 통신의 경우 props로 전달된 콜백 함수를 활용할 수 있습니다. 부모에서 자식으로. 예는 다음과 같습니다.

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.handler = this.handler.bind(this);
  }

  handler() {
    this.setState({ someVar: 'some value' });
  }

  render() {
    return <Child handler={this.handler} />;
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick={this.props.handler} />;
  }
}

이 시나리오에서는:

• 부모가 핸들러 함수를 Child의 소품으로 전달합니다.
• Child의 버튼을 클릭할 때 , 핸들러 함수를 호출합니다.
• Parent의 핸들러 함수는 내의 someVar 상태를 업데이트합니다. 상위.

대체 솔루션

관련되지 않은 구성 요소(예: 예의 구성 요소 5 및 구성 요소 3)를 다루는 경우 구성 요소를 재구성할 수 있습니다.

• 두 구성 요소(구성 요소 1 및 구성 요소)의 상태를 포함하는 새로운 상위 수준 구성 요소를 만듭니다. 3).
• 상위 구성 요소의 상태를 하위 구성 요소에 props로 전달합니다.

이 접근 방식을 사용하면 관련 없는 구성 요소 간의 상태를 props에 의존하지 않고 효과적으로 관리할 수 있습니다. 중간 상태 공유 메커니즘

위 내용은 외부 라이브러리 없이 React에서 하위 구성 요소가 상위 상태를 어떻게 업데이트할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!