shell 中的 Props 和回调-js教程-PHP中文网

shell 中的 props 和回调

在这篇博文中，我将带您了解一个实际场景，其中父组件 (listbox) 使用 props 和回调与子组件 (alertcomponent) 进行交互。

当您希望子组件与父组件通信以维护状态或触发操作时，这在 react 中非常有用。

让我们通过这个例子来理解：

我有一个 listbox 组件，用于显示项目列表。当用户长按任何项目时，会出现一个警告对话框，询问用户是否要删除该项目。

以下是交互细分：

listbox（父级）渲染项目并将必要的道具和回调传递给 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;

alertcomponent 接受诸如标题、描述和回调等属性，例如 onaccept、oncancel 和状态更改属性 showcomponent。

export const alertcomponent: = ({ title, description, 
onaccept, oncancel, showcomponent }) => {
return (
... rest of the code
)
}

父组件需要管理对话框的可见性，子组件通过回调发出事件来与父组件交互以切换此可见性。

showcomponent 作为回调工作，因为它维护负责显示/隐藏 alertcomponent

NT80 购物系统

功能说明：1 会员可申请开店功能2 购买在线扣除金额3 冲值卡自动生成4 支持2级分类5 数据库压缩和备份6 会员分5个级别7 商品带讨论8 自带融合论坛，可关闭打开9 密码找回功能10 新闻``滚动新闻``帮助中心11 后台设置前台会员的上传权限12 可关闭/打开商店13 会员自助发布商品功能14 用户问题咨询管理

下载

的状态

每当按下 reject 时，此回调将切换 showcomponent 的当前状态。

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

以这种方式使用 props 和 callbacks 可以让 react 中父组件和子组件之间的数据清晰流动。

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

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

继续建设！