React에서 깊게 중첩된 하위 구성 요소의 상위 구성 요소 상태를 업데이트하는 방법은 무엇입니까?

Redux 없이 React에서 하위 항목에서 상위 항목으로 상태 업데이트를 전파하는 방법

React의 단방향 데이터 흐름 모델은 상위 구성 요소를 업데이트하는 데 종종 어려움을 겪습니다. 그들의 후손으로부터 상태. 다음 구성 요소 구조가 존재하는 시나리오를 고려해 보겠습니다.

Component 1
    - Component 2
        - Component 4
            - Component 5
Component 3

구성 요소 3이 구성 요소 5의 상태를 기반으로 데이터를 표시하는 것이 목표입니다. props는 불변이므로 Component 5에서 Component 1로 상태를 전달하는 것은 불가능합니다.

대신 React는 콜백 함수를 사용하여 하위-상위 통신을 통해 솔루션을 제공합니다. 다음 코드 조각은 이를 달성하는 방법을 보여줍니다.

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} />;
  }
}

이 예에서 부모는 콜백 함수 handler()를 props를 통해 자식 구성 요소에 전달합니다. 하위 항목이 이 함수를 호출하면 상위 구성 요소의 상태 업데이트가 트리거되어 상태 변경이 구성 요소 트리 위로 전파될 수 있습니다.

이 접근 방식은 즉각적인 문제를 해결하지만 구성 요소 구조를 재고해야 할 수도 있습니다. . 주어진 시나리오에서 구성 요소 5와 3은 직접적인 관계가 없는 것으로 보입니다. 이 문제를 완화하려면 두 구성 요소의 상태를 관리하고 props를 통해 전파하는 상위 수준 구성 요소 내에 래핑하는 것을 고려하세요. 이를 통해 더욱 모듈화되고 유지 관리가 용이한 솔루션이 가능해졌습니다.

위 내용은 React에서 깊게 중첩된 하위 구성 요소의 상위 구성 요소 상태를 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!