このブログ投稿では、親コンポーネント (ListBox) が子コンポーネント (AlertComponent) と対話する実践的なシナリオを説明します。 ]) 小道具とコールバックを使用します。

これは、React で子コンポーネントが親に通信して状態を維持したり、アクションをトリガーしたりする場合に便利です。

この例を使って理解しましょう:

• 項目のリストを表示する ListBox コンポーネントがあります。ユーザーがいずれかの項目を長押しすると、その項目を削除するかどうかを尋ねる警告ダイアログが表示されます。

インタラクションの内訳は次のとおりです:

1. 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;

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 の親コンポーネントと子コンポーネント間のデータの明確なフローが可能になります。

親は状態を制御して子に渡すことができ、子はコールバックを介して通信して、ユーザーが実行した変更やアクションを親に通知できます。

これは、ユーザー インタラクションに応じてアラート、モーダル、ポップアップを表示するようなシナリオで特に役立ちます。

構築を続けます!