onClick을 사용하여 React Hooks에서 데이터를 전달하는 방법
<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"에서 홈 가져오기;
"./src/blogItem"에서 BlogItem을 가져옵니다.
함수 앱() {
반품 (
<div className="앱">
<브라우저라우터>
<경로>
<경로 경로="/" 요소={<홈 />}></Route>
<경로 경로="/blogItem" 요소={<BlogItem />}></Route>
</경로>
</브라우저라우터>
</div>
);
}
기본 앱 내보내기;
//Home.js
import "./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
import "./styles.css";
import React, { useState, useEffect, useCallback } from "react"
const blogData = [
{
아이디: 1,
날짜: "2023년 1월 25일",
사진: "https://picsum.photos/80",
제목: "Cypress 설정 블로그",
블로그세부정보:
"여기에 가장 좋은 제목이 추가되었습니다. 가장 관련성이 높은 데이터가 여기에 추가되었습니다. 역대 최고. 항상 여기서 노는 건 좋은 생각이 아닌 것 같아요.'
},
{
아이디: 2,
날짜: '2022년 1월 22일',
사진: "https://picsum.photos/80",
제목: "React 상태 세부정보",
블로그세부정보:
"여기에 가장 좋은 제목이 추가되었습니다. 가장 관련성이 높은 데이터가 여기에 추가되었습니다. 역대 최고. 항상 여기서 노는 건 좋은 생각이 아닌 것 같아요.'
}
];
const BlogItem = ({ ID, 날짜, 사진, 제목, blogDetails }) => {
const [searchResults, setSearchResults] = useState(blogData);
const [state, setState] = useState({ ID, 날짜, 사진, 제목, blogDetails });
const 열 = () => (
<div className="blogItems">
<div className="행">
<div className="blogArea">
{searchResults.map(({ ID, 날짜, 사진, 제목, blogDetails }) => (
<키={id}>
<div className="blogImageSection">
<img alt="ID" src={사진} />
<div key={id} className="dataArea">
<span className="dataDate">{날짜}</span>
<span className="tags">사이프러스</span>
{제목}
<p>
여기에 최고의 제목이 추가되었습니다. 가장 관련성이 높은 데이터가 여기에 추가되었습니다.
역대 최고. 항상 여기서 플레이하는 것은 좋은 생각이 아닐 것입니다.
</p>
<a href="_blank" className="readmoreLink">
더 읽어보기 →
</a>
</div>
</div>
</a>
))}
</div>
</div>
</div>
);
return <열 {...상태} />
};
기본 BlogItem 내보내기;</pre>
<p>// BlogDetails.js</p>
<pre class="brush:php;toolbar:false;">"react"에서 React 가져오기;;
const BlogDetails = () => {
반품 (
<div id="앱">
<div className="blogDetailsSection">
<div className="행">
<div className="개인-블로그">
ddd
<p>블로그 세부정보</p>
<사전>
<code>const data = []; data.push("축구");</code>
</pre>
</div>
</div>
</div>
</div>
);
};
기본 블로그 세부정보 내보내기</pre></p>
