Redux를 사용하지 않고 React의 중첩된 하위 구성 요소에서 상위 구성 요소의 상태를 어떻게 업데이트할 수 있나요?

Redux 없이 React에서 상위 상태 업데이트

많은 개발자가 중첩된 구성 요소 간에 상태를 통신하는 문제에 직면합니다. 하위 구성 요소가 더 높은 수준의 상위 구성 요소 상태를 업데이트해야 하는 경우 일반적인 시나리오가 발생합니다. React에서는 props가 불변이라고 지시하기 때문에 문제가 됩니다.

다음 구성 요소 구조를 고려하세요.

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

이 시나리오에서 구성 요소 3은 구성 요소 5에 저장된 상태에 액세스해야 합니다. 구성요소 5의 상태를 구성요소 1에 prop으로 전달하고 이를 다른 구성요소에 전달하는 것은 직관적입니다. 그러나 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}/>
  }
}

이 예에서는 Parent 구성 요소에서 제공하는 핸들러 함수가 Child 구성 요소에 prop으로 전달됩니다. 하위 구성 요소의 버튼을 클릭하면 핸들러 기능이 호출되어 상위 구성 요소의 상태가 업데이트됩니다.

이 솔루션에서는 구성 요소 간의 논리적 관계를 보장하기 위해 구성 요소 계층 구조를 재구성해야 한다는 점에 유의하는 것이 중요합니다. 주어진 예에서 구성요소 5와 구성요소 3은 직접적으로 관련되지 않을 수 있습니다. 따라서 상태를 효과적으로 관리할 수 있도록 이를 포함하는 새로운 구성 요소를 생성해야 할 수도 있습니다.

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