関数コンポーネントを反応オブジェクトとして処理するときにエラーが発生しました: オブジェクトは有効な React 子要素ではありません (見つかった: キーを持つオブジェクト)

Question

Alert コンポーネントをレンダリングしようとしています。プロパティが親コンポーネントから渡されると、レンダリングされるはずですが、エラーが発生します

キャッチされないエラー: オブジェクトは有効な React 子要素ではありません (見つかった: キー {message, showAlerts} を持つオブジェクト。子要素のコレクションをレンダリングしたい場合は、代わりに配列を使用してください。

React が関数コンポーネントをオブジェクトとして扱う理由がわかりません。コードサンドボックスのリンク: https://codesandbox.io/s/exciting-smoke-mij6ke?file=/src/App.js:0-3054

これは親コンポーネントです:

リーリー

サブアセンブリ:

リーリー

ここで何が間違っていて、何を変更する必要がありますか?

私は、受け入れられると思われる方法でアラートの子コンポーネントをレンダリングしようとします。ボタンをクリックすると、アラート コンポーネントがレンダリングされ、アラート ボックスが開く必要があります。アラートを閉じるときは、アラートを表示する親コンポーネント (showAlerts) の状態変数も「false」に変更する必要があります。

Answer 1

次の文を中国語に翻訳し、HTML コードを保持します。新しいコンテンツを追加する必要はありません:

リーリー ＃＃＃なる：＃＃＃ リーリー

小道具は常にオブジェクトであり、最初のパラメータとして渡されるためです。

パラメータ リストで中括弧を使用することは、最初のパラメータ (つまり、props パラメータ) を構造化することを意味します。