전체 자식을 다시 전달하지 않고 React.js의 자식에서 부모 구성 요소로 소품을 전달하는 방법은 무엇입니까?

이벤트를 사용하여 React.js의 하위 구성 요소에서 상위 구성 요소로 Prop을 전달하는 방법

React.js에는 하위 구성 요소에서 데이터를 전달하는 다양한 접근 방식이 있습니다. 부모에게. 이벤트 핸들러는 편리한 경우가 많지만 모범 사례와 잠재적인 위험을 이해하는 것이 중요합니다.

전체 하위 구성 요소를 다시 전달하지 않는 이유

기타 솔루션 이 문제는 이벤트 핸들러를 통해 전체 하위 구성요소를 상위 구성요소로 다시 전달하는 것을 제안할 수 있습니다. 그러나 이 접근 방식은 일반적으로 다음과 같은 이유로 권장되지 않습니다.

• props 중복: 부모는 이미 자식에게 전달되는 props를 가지고 있으므로 다시 전달할 필요가 없습니다.
• 결합 및 캡슐화: 이러한 방식으로 상위와 하위를 단단히 결합하면 유지 관리가 발생할 수 있습니다. 및 리팩토링 문제.

더 나은 구현

대신, 부모가 이미 자식이 사용하는 소품을 가지고 있다는 사실을 활용해야 합니다.

자녀:

var Child = React.createClass({
  render: function() {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

부모님(미혼자녀):

var Parent = React.createClass({
  getInitialState: function() {
    return { childText: "Click me! (parent prop)" };
  },
  render: function() {
    return <Child onClick={this.handleChildClick} text={this.state.childText} />;
  },
  handleChildClick: function(event) {
    // Access the props passed to the child
    alert("The Child button text is: " + this.state.childText);
    // Access the click target
    alert("The Child HTML is: " + event.target.outerHTML);
  },
});

부모님 (다수의 하위):

var Parent = React.createClass({
  getInitialState: function() {
    return {
      childrenData: [
        { childText: "Click me 1!", childNumber: 1 },
        { childText: "Click me 2!", childNumber: 2 },
      ],
    };
  },
  render: function() {
    const children = this.state.childrenData.map(
      (childData, childIndex) => {
        return (
          <Child
            onClick={this.handleChildClick.bind(null, childData)}
            text={childData.childText}
            key={childIndex}  // Added key for each child component
          />
        );
      }
    );
    return <div>{children}</div>;
  },
  handleChildClick: function(childData, event) {
    alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
    alert("The Child HTML is: " + event.target.outerHTML);
  },
});

이 예에서 상위는 전체 하위를 다시 전달할 필요 없이 하위 구성 요소의 props 및 클릭 대상에 액세스할 수 있습니다.

ES6 업데이트

ES6 구문의 경우 코드는 다음과 같습니다. 이:

자녀:

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

부모(미혼 자녀):

class Parent extends React.Component {
  state = { childText: "Click me! (parent prop)" };
  handleChildClick = (event) => {
    alert("The Child button text is: " + this.state.childText);
    alert("The Child HTML is: " + event.target.outerHTML);
  };
  render() {
    return <Child onClick={this.handleChildClick} text={this.state.childText} />;
  }
}

부모 (다수의 하위):

class Parent extends React.Component {
  state = {
    childrenData: [
      { childText: "Click me 1!", childNumber: 1 },
      { childText: "Click me 2!", childNumber: 2 },
    ],
  };
  handleChildClick = (childData, event) => {
    alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
    alert("The Child HTML is: " + event.target.outerHTML);
  };
  render() {
    const children = this.state.childrenData.map((childData, childIndex) => (
      <Child key={childIndex} text={childData.childText} onClick={(e) => this.handleChildClick(childData, e)} />
    ));
    return <div>{children}</div>;
  }
}

이러한 솔루션을 사용하면 캡슐화 및 유지 관리가 향상되는 동시에 하위 구성 요소에서 상위 구성 요소로 필요한 정보를 유연하게 전달할 수 있습니다.

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