React.js에서 하위 속성을 상위 항목으로 전달하는 방법은 무엇입니까?

React.js에서 하위 Prop을 상위로 전달

Context

React는 Prop을 통해 상위 구성 요소와 하위 구성 요소 간의 강력한 통신 메커니즘을 제공합니다. 그러나 소품과 함께 전체 하위 구성 요소를 상위 구성 요소에 전달하려는 상황이 있을 수 있습니다. 이는 자식 내에서 복잡한 논리를 캡슐화하고 부모에게 보다 간단한 인터페이스를 제공하려는 시나리오에서 유용할 수 있습니다.

자식에서 부모로의 Prop 전달에 대한 우려

역사적으로 일부 개발자들은 이벤트를 사용하여 하위 소품을 상위 소품으로 전달할 것을 제안했지만 이 접근 방식은 결합 및 캡슐화에 대한 우려를 불러일으킵니다. 상위 내에서 하위 구성 요소의 props 및 구현 세부 사항에 직접 액세스하면 구성 요소가 긴밀하게 결합되어 리팩토링 작업이 방해될 수 있습니다.

권장 접근 방식

대신 기존 상위 prop 메커니즘을 활용하여 액세스하는 것이 좋습니다. 아이의 데이터. 이를 통해 부모는 자식에게 제공하는 props를 활용할 수 있으므로 자식 자체 내에서 자식의 props를 검색할 필요가 없습니다.

클래스 구성 요소를 사용한 구현

하위 구성 요소:

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

부모님 구성 요소:

class Parent extends Component {
  getInitialState() {
    return { childText: "Click me! (parent prop)" };
  }

  render() {
    return (
      <Child
        onClick={this.handleChildClick}
        text={this.state.childText}
      />
    );
  }

  handleChildClick(event) {
    const childText = this.state.childText;

    // Parent has access to child prop
    alert(`The Child button text is: ${childText}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  }
}

기능 구성 요소를 사용한 구현

하위 구성 요소:

const Child = ({ onClick, text }) => {
  return <button onClick={onClick}>{text}</button>;
};

상위 구성 요소 구성 요소:

const Parent = ({ childrenData }) => {
  const handleChildClick = (childData, event) => {
    const childText = childData.childText;
    const childNumber = childData.childNumber;

    // Parent has access to child prop
    alert(`The Child button data is: ${childText} - ${childNumber}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData) => (
        <Child
          key={childData.childNumber}
          onClick={(event) => handleChildClick(childData, event)}
          text={childData.childText}
        />
      ))}
    </div>
  );
};

결론

React의 기존 prop 메커니즘을 수용하면 불필요한 결합을 도입하거나 캡슐화 원칙을 위반하지 않고 상위 구성 요소와 하위 구성 요소 간에 데이터를 효과적으로 전달할 수 있습니다. 이러한 접근 방식을 사용하면 구성 요소가 독립적이고 유연하게 유지되어 더 깔끔하고 유지 관리가 용이한 코드가 가능해집니다.

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