[英]How can i pass this component
我想在我的收藏夾組件中顯示“最喜歡的”項目。 但由於我無法將 postList 組件傳遞給收藏夾組件,所以我不知道該怎么做。
基本上我想在另一個頁面/組件而不是 home.js 中顯示這個最喜歡的項目。
首頁.js
import React, { useState, useEffect } from "react";
import { getDocs, collection, deleteDoc, doc } from "firebase/firestore";
import { db, auth } from "../../firebase";
import { Link } from "react-router-dom";
import Sidebar from "../Sidebar/Sidebar";
import "./Home.css";
import PostList from "./PostList";
const Home = ({ isAuth, setIsAuth }) => {
const [postLists, setPostList] = useState([]);
const postsCollectionRef = collection(db, "posts");
const [favorites, setFavorites] = useState(localStorage.getItem("dam"));
useEffect(() => {
const getPosts = async () => {
const data = await getDocs(postsCollectionRef);
setPostList(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
};
getPosts();
}, []);
useEffect(() => {
const localData = localStorage.getItem("dam") ?? [];
setFavorites(localData);
}, [setFavorites]);
const addFavorite = (favorite) => {
setFavorites((prevfavorites) => [...prevfavorites, favorite]);
localStorage.setItem("dam", JSON.stringify(favorites));
};
return (
<div className="containers">
<div className="sidebar">
<Sidebar isAuth={isAuth} setIsAuth={setIsAuth} />
<div className="centered">
<div className="bordered">
<button id="ado">
<Link to="/createpost">+ Add API</Link>
</button>
</div>
<div className="new-container">
{postLists?.map((post) => {
return (
<>
<PostList
post={post}
addFavorite={addFavorite}
key={post.id}
/>
</>
);
})}
</div>
</div>
<div className="another">
<h2>FAVORITE ITEMS</h2>
{postLists
.filter((post) => favorites.includes(post.id))
.map((post) => (
<PostList post={post} addFavorite={addFavorite} key={post.id} />
))}
</div>
</div>
</div>
);
};
export default Home;
PostList.js
import React from "react";
const PostList = ({ post, addFavorite }) => {
const { linkin, title, imageURL, photoURL, name, id } = post;
return (
<>
<div>
<div className="post">
<div className="postimage">
<div className="del"></div>
<div className="images">
<a href={linkin}>
<p className="ss">{title}</p>
<img src={imageURL} id="img-photo" />
</a>
<div className="uploader">
<img src={photoURL} />
<p>by {name}</p>
</div>
{addFavorite && (
<div className="butons">
<button onClick={() => addFavorite(id)} id="favori">
+
</button>
</div>
)}
</div>
</div>
</div>
</div>
</>
);
};
export default PostList;
和一個空的 Favorites.js 組件。
收藏夾.js
favorites here...
為什么不使用反應自定義掛鈎或 useContext 掛鈎。 使用這兩個選項,您可以共享和訪問收藏夾組件中的收藏夾項目。 這些掛鈎有助於在全球范圍內共享 state。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.