我正在尝试使用 React 制作标签
我有一个包含数据信息的文件,它是一个对象数组 这个对象数组包含 id,title,info,pic,category
我有一个名为 Buttons 的组件,该组件使用名为 All 的按钮显示对象数组中的所有类别
export default function Buttons() {
const [tab, setTab] = useState("all");
const switchTab = (curcat) => {
setTab(curcat);
};
return (
<>
<Span className="active">all</Span>
{data.map((item, i) => {
return (
<Span key={i} onClick={() => switchTab(item)}>
{item}
</Span>
);
})}
</>
);
}
在另一个名为 Portfolio 的组件中,我调用 Buttons 组件,并使用 map 函数显示对象数组中的所有数据
在这个组件中,我做了一个函数来根据类别过滤数据,然后使用地图函数显示结果 下面的代码有效,但它不是动态的我想代替网页设计从按钮组件中获取值以使其动态所以当我单击一个按钮时我显示所有具有此类别的内容如果我单击所有我显示所有内容
export default function Portfolio() {
const filtered = data.filter(profile => {
return profile.category === "web design";
});
return (
<div id='profile'>
<PortfolioWrapper>
<Buttons />
<ProfileContainer>
{
filtered.map((item) => {
return (
<ProfileBox
key={item.id}
title={item.title}
info={item.info}
pic={item.pic}
/>
)
})
}
</ProfileContainer>
</PortfolioWrapper>
</div>
)
}
您可以在 Button 组件中创建一个 props 并触发您的过滤功能以设置新的过滤数组。我没有碰你的标签和 setTab 以防你需要它来做其他事情,但在这个问题上,你不需要它
按钮组件
export default function Buttons({ setCategory }) {
const [tab, setTab] = useState("all");
const switchTab = (curcat) => {
setTab(curcat);
setCategory(curcat) // if that's not your category name set second argument and pass it
};
return (
<>
<Span className="active">all</Span>
{data.map((item, i) => {
return (
<Span key={i} onClick={() => switchTab(item)}>
{item}
</Span>
);
})}
</>
);
}
和您的投资组合组件
export default function Portfolio() {
const [filtered, setFiltered] = useState([]) // Here put your array "all" as default or leave it empty
const handleFilter = (category) => { // You can make async also if you call some apis
const filteredCategory= data.filter(profile => {
return profile.category === "web design";
});
setFiltered(filteredCategory)
}
return (
<div id='profile'>
<PortfolioWrapper>
<Buttons setCategory={handleFilter}/>
<ProfileContainer>
{
filtered?.map((item) => {
return (
<ProfileBox
key={item.id}
title={item.title}
info={item.info}
pic={item.pic}
/>
)
})
}
</ProfileContainer>
</PortfolioWrapper>
</div>
)
}