ホームページ >ウェブフロントエンド >jsチュートリアル >シェル内のプロパティとコールバック
このブログ投稿では、親コンポーネント (ListBox) が子コンポーネント (AlertComponent) 小道具とコールバックを使用します。
これは、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>) }親コンポーネントはダイアログの可視性を管理する必要があり、子コンポーネントはコールバックを通じてイベントを発行して親と対話し、この可視性を切り替えます。
を表示/非表示にする状態を維持するため、コールバックとして機能します。
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 の親コンポーネントと子コンポーネントの間で明確なデータ フローが可能になります。 親は状態を制御して子に渡すことができ、子はコールバックを介して通信して、ユーザーが実行した変更やアクションを親に通知できます。
これは、ユーザー操作に応じてアラート、モーダル、またはポップアップを表示するようなシナリオで特に役立ちます。
構築を続けてください!
以上がシェル内のプロパティとコールバックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。