쉘의 소품과 콜백

이 블로그 게시물에서는 상위 구성 요소(ListBox)가 하위 구성 요소(AlertComponent) 소품과 콜백을 사용합니다.

이는 상태를 유지하거나 작업을 트리거하기 위해 하위 구성 요소가 상위 구성 요소와 다시 통신하도록 하려는 경우 React에서 유용합니다.

이 예를 통해 이해해 봅시다.

항목 목록을 표시하는
• ListBox 구성 요소가 있습니다. 사용자가 항목을 길게 누르면 사용자가 항목을 삭제할 것인지 묻는 경고 대화 상자가 나타납니다.

상호작용 분석은 다음과 같습니다.

1. ListBox(상위)는 항목을 렌더링하고 필요한 props와 콜백을 AlertComponent(하위)에 전달합니다.

import React, { useState } from 'react';
import AlertComponent from './AlertComponent';

const ListBox = () => {
  const [showComponent, setShowComponent] = useState<boolean>(false);

  const alertAction = async () => {
    setShowComponent(!showComponent);
  };

  return (
    <div>
      <div onLongPress={alertAction}>
        <p>Item 1</p>
        {/* Other list items */}
      </div>

      {/* Passing props to the child component */}
      <AlertComponent
        title="Deleting item?"
        description="Click Accept to delete."
        onAccept={() => {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}

      />
    </div>
  );
};

export default ListBox;

1. AlertComponent는 제목, 설명과 같은 prop과 onAccept, onCancel과 같은 콜백 및 상태 변경 prop인 showComponent.

export const AlertComponent: = ({ title, description, 
onAccept, onCancel, showComponent }) => {
return (<AlertDialog>
... rest of the code
</AlertDialog>)
}

상위 구성 요소는 대화 상자의 가시성을 관리해야 하며, 하위 구성 요소는 이 가시성을 전환하기 위해 콜백을 통해 이벤트를 내보내는 방식으로 상위 구성 요소와 상호 작용합니다.

showComponent는

AlertComponent

표시/숨기기를 담당하는 상태를 유지하면서 콜백으로 작동합니다.

거부

를 누를 때마다 이 콜백은 showComponent의 현재 상태를 전환합니다.

이러한 방식으로

<AlertComponent
        title="Deleting item?"
        description="Click Accept to delete."
        onAccept={() => {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}
      />

props

및 콜백을 사용하면 React의 상위 구성 요소와 하위 구성 요소 간의 데이터 흐름이 명확해집니다. 부모는 상태를 제어하고 이를 자식에게 전달할 수 있으며, 자식은 콜백을 통해 다시 통신하여 사용자가 수행한 변경 사항이나 작업을 부모에게 알릴 수 있습니다.

이 기능은 사용자 상호 작용에 대한 응답으로 경고, 모달 또는 팝업을 표시하는 등의 시나리오에 특히 유용합니다.

계속 구축하세요!

위 내용은 쉘의 소품과 콜백의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!