シェル内のプロパティとコールバック

このブログ投稿では、親コンポーネント (ListBox) が子コンポーネント (AlertComponent) 小道具とコールバックを使用します。

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

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

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

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

1. ListBox (親) は項目をレンダリングし、必要な props とコールバックを AlertComponent (子) に渡します。

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;

1. AlertComponent は、タイトル、説明、コールバックなどのプロパティ (onAccept、onCancel、状態変更プロパティ showComponent。

export const AlertComponent: = ({ title, description, 
onAccept, onCancel, showComponent }) => {
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={() => setShowComponent(false)}
        showComponent={alertAction}
      />

props

と callbacks を使用すると、React の親コンポーネントと子コンポーネントの間で明確なデータ フローが可能になります。 親は状態を制御して子に渡すことができ、子はコールバックを介して通信して、ユーザーが実行した変更やアクションを親に通知できます。

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

構築を続けてください!

以上がシェル内のプロパティとコールバックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。