在这篇博文中，我将带您了解一个实际场景，其中父组件 (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中父组件和子组件之间的数据流清晰。

父级可以控制状态并将其传递给子级，而子级可以通过回调进行通信，以通知父级用户执行的任何更改或操作。

这对于显示警报、模式或弹出窗口以响应用户交互等场景特别有用。

继续建设！