在這篇博文中，我將帶您了解一個實際場景，其中父組件(ListBox) 與子組件(AlertComponent ) 使用props 和回呼。
當您希望子元件與父元件通訊以維護狀態或觸發操作時，這在 React 中非常有用。
讓我們透過這個例子來理解：
以下是交互細分：
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;
export const AlertComponent: = ({ title, description,
onAccept, onCancel, showComponent }) => {
return (<AlertDialog>
... rest of the code
</AlertDialog>)
}
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中文網其他相關文章！
