shell 中的 Props 與回呼

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

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

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

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

以下是交互細分：

1. ListBox（父級）渲染項目並將必要的道具和回呼傳遞給 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 接受標題、描述和回呼等屬性，例如 onAccept、onCancel 和狀態變更屬性 showComponent。

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

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

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

的狀態

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

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

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

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

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

繼續建造！

以上是shell 中的 Props 與回呼的詳細內容。更多資訊請關注PHP中文網其他相關文章！