<p>blogItem がクリックされたときに、<code>blogItem.js</code> コンポーネントから <code>blogDetails.js</code> コンポーネントにデータを渡すにはどうすればよいですか?ただし、blogItem コンポーネントは Home.js コンポーネントにインポートされます。クリックアクションをどこに追加すればよいか教えてください。誰か例を共有できますか? </p> <p>CodeSandboX リンク https://codesandbox.io/s/gallant-water-5bmueq?file=/src/blogItem.js:0-1876</p> <pre class="brush:php;toolbar:false;">// App.js import { BrowserRouter, Route, Routes, Switch } from "react-router-dom"; ホームを「./src/Home」からインポートします。 BlogItem を「./src/blogItem」からインポートします。 関数 App() { 戻る （ <div className="アプリ"> <ブラウザルーター> <ルート> <ルートパス="/"要素={<Home />}></Route> <ルート パス="/blogItem" 要素={<BlogItem />}></Route> </ルート> </ブラウザルーター> </div> ); } デフォルトのアプリをエクスポートします。 //ホーム.js インポート「./styles.css」; import React, { useState, useEffect, useCallback } from "react"; BlogItem を「./blogItem」からインポートします。 const ホーム = (小道具) => { const [blogItem, setBlogItem] = useState(props); useEffect(() => { setBlogItem(props); }, [小道具]); 戻る （ <div id="アプリ"> <ブログアイテム /> </div> ); }; デフォルトのホームをエクスポートします。 // BlogItem.js インポート「./styles.css」; import React, { useState, useEffect, useCallback } from "react"; const blogData = [ { ID:1、 日付: 「2023 年 1 月 25 日」、 写真: 「https://picsum.photos/80」、 見出し: 「Cypress セットアップ ブログ」、 ブログ詳細: "最適な見出しをここに追加しました。最も関連性の高いデータがここに追加されました。史上最高。いつもここでプレーするのは得策ではないだろう。」 }、 { ID:2、 日付: 「2022 年 1 月 22 日」、 写真: 「https://picsum.photos/80」、 見出し: "反応状態の詳細"、 ブログ詳細: "最適な見出しをここに追加しました。最も関連性の高いデータがここに追加されました。史上最高。いつもここでプレーするのは得策ではないだろう。」 } ]; const BlogItem = ({ id, 日付, 写真, 見出し, blogDetails }) => { const [searchResults, setSearchResults] = useState(blogData); const [state, setState] = useState({ id, 日付, 写真, 見出し, blogDetails }); const 列 = () => ( <div className="blogItems"> <div className="行"> <div className="ブログエリア"> {searchResults.map(({ id, 日付, 写真, 見出し, blogDetails }) => ( <a key={id}> <div className="blogImageSection"> ddd <p>ブログの詳細</p> <前> <code>const データ = []; data.push("サッカー");</code> </pre> </div> </div> </div> </div> ); }; デフォルトの BlogDetails をエクスポート;</pre></p>