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

React의 콜백 함수를 통해 상위 상태 업데이트 전달

중첩된 React 구성요소로 작업할 때 상태를 업데이트해야 할 수도 있습니다. 하위 구성 요소 내의 상위 구성 요소입니다. props는 불변이므로 값을 직접 할당하는 것은 불가능합니다.

이러한 시나리오에서 대체 접근 방식은 상위 구성 요소의 상태를 업데이트할 수 있는 함수를 하위 구성 요소에 전달하는 것입니다. 이는 다음과 같이 달성할 수 있습니다.

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

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

이 메커니즘을 통해 하위 구성 요소는 props를 통해 제공된 기능을 호출하고 상위 구성 요소의 상태를 업데이트할 수 있습니다.

그러나 구성요소 구조를 재평가해야 할 수도 있습니다. 귀하의 예에서 구성 요소 5와 3은 직접적인 관계가 없는 것으로 보입니다.

한 가지 잠재적인 해결책은 구성 요소 5와 3을 모두 캡슐화하는 상위 수준 구성 요소를 도입하는 것입니다. 이 상위 구성 요소는 다음과 관련된 상태를 유지할 수 있습니다. 하위 구성요소를 모두 추가하고 props를 통해 전달합니다.

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