如何在 Gatsby .map 函数中只显示一个元素?
How to show only one element in a Gatsby .map function?
我是 Gatsby 的新手。我在这里不知道该怎么办......请帮助我......
单击按钮时,我只想显示一个元素 (h4)。
例如,我有 5 个计划,每个计划都有一个按钮和一个 h4 标签。
当我点击第三个按钮时,只会显示第三个 h4 标签。
正如我的代码所预期的那样,当单击按钮时,它会显示地图的每个元素的 h4 标签。在这种情况下,有什么办法可以 active/inactive 仅针对地图的一个元素的组件?
提前谢谢你。
import React, { useState } from "react"
const TourPage = ({
const [isOpen, setOpen] = React.useState(false)
const toggleOpen = () => {
setOpen(!isOpen)
}
return (
<article>
{plans.map((plan, index) => {
return (
<div key={index}>
<button
className="btn"
onClick={toggleOpen}
> button </button>
<div
className={`${isOpen ? "active" : "inactive"}`}
>
<h4>{plan.iternary}</h4>
</div>
</div>
)
})}
</article>
您需要多个状态,每个计划的状态。
这里是一个简单的例子,你可以随意实现,但是概念是一样的:管理组件内的多个状态。
const plans = [{ id: `id1`, iternary: "a1" }, { id: `id2`, iternary: "a2" }];
const INITIAL = {
id1: false,
id2: false
};
const TourPage = () => {
const [openManager, setOpenManager] = React.useState(INITIAL);
return (
<article>
{plans.map(plan => {
const onClick = () => {
setOpenManager(prev => ({ ...prev, [plan.id]: !prev[plan.id] }));
};
return (
<div key={plan.id}>
<button className="btn" onClick={onClick}>
button
</button>
<div className={`${openManager[plan.id] ? "active" : "inactive"}`}>
<h4>{plan.iternary}</h4>
</div>
</div>
);
})}
</article>
);
};
我是 Gatsby 的新手。我在这里不知道该怎么办......请帮助我...... 单击按钮时,我只想显示一个元素 (h4)。 例如,我有 5 个计划,每个计划都有一个按钮和一个 h4 标签。 当我点击第三个按钮时,只会显示第三个 h4 标签。 正如我的代码所预期的那样,当单击按钮时,它会显示地图的每个元素的 h4 标签。在这种情况下,有什么办法可以 active/inactive 仅针对地图的一个元素的组件? 提前谢谢你。
import React, { useState } from "react"
const TourPage = ({
const [isOpen, setOpen] = React.useState(false)
const toggleOpen = () => {
setOpen(!isOpen)
}
return (
<article>
{plans.map((plan, index) => {
return (
<div key={index}>
<button
className="btn"
onClick={toggleOpen}
> button </button>
<div
className={`${isOpen ? "active" : "inactive"}`}
>
<h4>{plan.iternary}</h4>
</div>
</div>
)
})}
</article>
您需要多个状态,每个计划的状态。
这里是一个简单的例子,你可以随意实现,但是概念是一样的:管理组件内的多个状态。
const plans = [{ id: `id1`, iternary: "a1" }, { id: `id2`, iternary: "a2" }];
const INITIAL = {
id1: false,
id2: false
};
const TourPage = () => {
const [openManager, setOpenManager] = React.useState(INITIAL);
return (
<article>
{plans.map(plan => {
const onClick = () => {
setOpenManager(prev => ({ ...prev, [plan.id]: !prev[plan.id] }));
};
return (
<div key={plan.id}>
<button className="btn" onClick={onClick}>
button
</button>
<div className={`${openManager[plan.id] ? "active" : "inactive"}`}>
<h4>{plan.iternary}</h4>
</div>
</div>
);
})}
</article>
);
};