React의 하위 구성 요소에서 상위 구성 요소의 상태를 어떻게 업데이트할 수 있나요?

React의 하위-상위 상태 관리

React에서는 구성 요소의 계층 구조 내에서 상태를 유지하는 것이 어려울 수 있습니다. 특히 상위 구성요소는 하위 구성요소에서 업데이트되어야 합니다. 제공된 예는 구성 요소 3이 구성 요소 5의 상태를 기반으로 데이터를 표시해야 하는 상위-하위 구성 요소 구조를 보여줍니다.

props는 일반적으로 변경할 수 없지만 하위 항목에서 상위 항목의 상태를 업데이트하는 것이 불가능하다는 의미는 아닙니다. 이를 달성하는 방법은 다음과 같습니다.

상태 설정 함수를 부모에서 자식으로 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} / >
  }
}

이 예에서 하위 항목은 상위 항목의 핸들러 기능에 액세스할 수 있습니다. 자식 내의 버튼을 클릭하면 핸들러가 호출되어 부모의 상태가 업데이트됩니다.

그러나 구성 요소 구조를 고려하는 것이 중요합니다. 귀하의 경우 구성요소 5와 3은 직접적인 관련이 없습니다. 이 문제를 해결하기 위해 구성 요소 1과 3 모두의 상태를 캡슐화하는 상위 수준 구성 요소를 도입할 수 있습니다. 그런 다음 이 중간 구성 요소는 하위 수준 구성 요소에 필요한 속성을 제공합니다.

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