React.js에서 하위 구성요소의 소품을 상위 구성요소로 전달하는 방법은 무엇입니까?

React.js의 상위 구성 요소에 Prop 전달

React.js에서 상위-하위 관계로 작업할 때 즉시 완료되지 않을 수 있습니다. 하위 구성 요소의 소품을 상위 구성 요소에 전달하는 방법이 분명합니다. 그러나 이벤트나 복잡한 구성에 의존하지 않는 간단한 접근 방식이 있습니다.

문제 식별

이 문제는 자식의 props를 해당 개체에 직접 전달하려고 할 때 발생합니다. onClick과 같은 이벤트를 사용하는 부모. 이벤트를 통해 자녀의 소품에 접근하려고 하면 부모가 이미 해당 소품을 소유하고 있는데 왜 그러한 접근 방식이 필요한지에 대한 의문이 제기됩니다.

더 간단한 접근 방식

보다 효율적인 솔루션은 부모가 이미 하위 소품에 액세스할 수 있다는 사실을 활용하고 이를 직접 사용하는 것입니다.

// Child component
render() {
  return <button onClick={this.props.onClick}>{this.props.text}</button>;
}

// Parent component (with single child)
render() {
  return <Child onClick={this.handleChildClick} text={this.state.childText} />;
}

// Parent component (with list of children)
render() {
  const children = this.state.childrenData.map(childData => {
    return <Child onClick={this.handleChildClick.bind(null, childData)} text={childData.childText} />;
  });

  return <div>{children}</div>;
}

과잉 결합 방지

onClick 핸들러를 통해 전체 하위 구성 요소를 상위 구성 요소에 전달하는 것은 불필요한 결합을 유발하고 캡슐화를 손상시키므로 권장되지 않습니다. 대신 구성 요소 간의 상호 작용을 해당 인터페이스로 제한하는 것이 좋습니다.

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