shell 中的 Props 和回调

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签回调

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

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

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

以下是交互细分：

listbox（父级）渲染项目并将必要的道具和回调传递给 alertcomponent（子级）。

import react, { usestate } from 'react';import alertcomponent from './alertcomponent';const listbox = () =&gt; {  const [showcomponent, setshowcomponent] = usestate<boolean>(false);  const alertaction = async () =&gt; {    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={() =&gt; setshowcomponent(false)}        showcomponent={alertaction}      /&gt;    </alertcomponent></div>  );};export default listbox;</boolean>

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

export const alertcomponent: = ({ title, description, onaccept, oncancel, showcomponent }) =&gt; {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={() =&gt; setShowComponent(false)}        showComponent={alertAction}      /&gt;</alertcomponent>

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

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

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

继续建设！

文章推荐

shell 中的 Props 和回调

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？