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

React.js에서 부모 구성 요소에 Prop 전달

이벤트를 사용하여 자식의 Prop을 부모에게 보낼 수는 없나요? React.js?

다른 솔루션도 있지만 근본적인 사항을 간과하는 경우가 많습니다. 가리키다. 부모는 자녀에게 물려주는 소품을 이미 소유하고 있습니다. 따라서 자녀가 해당 소품을 부모에게 다시 보낼 필요가 없습니다.

더 나은 접근 방식

자녀:
자식 구성 요소는 다음과 같습니다. 단순하게 유지됩니다.

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

부모(미혼) 하위):
자식에게 보내는 prop을 활용하여 부모는 클릭 이벤트를 처리합니다.

const Parent = ({ childText }) => {
  const handleClick = (event) => {
    // Parent already has the child prop.
    alert(`Child button text: ${childText}`);
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return <Child text={childText} onClick={handleClick} />;
};

부모(자식 목록):
부모는 필요한 정보에 대한 액세스 권한을 잃지 않고 여러 하위 항목을 관리합니다.

const Parent = ({ childrenData }) => {
  const handleClick = (childData, event) => {
    alert(
      `Child button data: ${childData.childText} - ${childData.childNumber}`
    );
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData, index) => (
        <Child
          key={index}
          text={childData.childText}
          onClick={e => handleClick(childData, e)}
        />
      ))}
    </div>
  );
};

이 전략은 캡슐화를 존중하고 데이터를 줄입니다. 아이의 내부 구조에 의존하지 않음으로써 결합을 유도합니다.

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