在這篇文章中，我將帶您了解一個實際場景，其中父元件(ListBox) 與子元件(AlertComponent ) 使用props 和回呼。

當您希望子元件與父元件通訊以維護狀態或觸發操作時，這在 React 中非常有用。

讓我們透過這個例子來理解：

• 我有一個 ListBox 元件，用於顯示項目清單。當使用者長按任何項目時，會出現警告對話框，詢問使用者是否要刪除該項目。

這是互動細分：

1. ListBox（父級）渲染專案並將必要的 props 和回呼傳遞給 AlertComponent（子級）。

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

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

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

  return (
    

      

        
Item 1
        {/* Other list items */}
      

      {/* Passing props to the child component */}
       {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}

      />
    
  );
};

export default ListBox;

1. AlertComponent 接受標題、描述和回調等屬性，例如 onAccept、onCancel 和狀態變更屬性 showComponent。

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

1. 父元件需要管理對話方塊的可見性，子元件透過回呼發出事件來與父元件互動以切換此可見性。

showComponent 作為回調工作，因為它維護負責顯示/隱藏 AlertComponent

每當按下Reject時，此回呼將切換showComponent的目前狀態。

 {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}
      />

以這種方式使用props和callbacks可以讓React中父元件和子元件之間的資料流清晰。

父級可以控制狀態並將其傳遞給子級，而子級可以透過回調進行通信，以通知父級用戶執行的任何更改或操作。

這對於顯示警報、模式或彈出視窗以響應用戶互動等場景特別有用。

繼續建設！