如何在 Gatsby .map 函数中只显示一个元素？

Question

我是盖茨比的新手。我已经失去了在这里做什么......请帮助我...... 单击按钮时，我只想显示一个元素（h4）。 例如，我有 5 个计划，每个计划都有一个按钮和一个 h4 标签。 当我单击第三个按钮时，只会显示第三个 h4 标签。 正如我的代码所预期的那样，当单击按钮时，它会显示地图的每个元素的 h4 标记。在这种情况下，我有什么办法可以只为地图的一个元素启用/停用该组件？ 提前谢谢你。

  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>

Answer 1

您需要有多个状态，每个计划的状态。

这里是一个简单的例子，你可以随心所欲地实现它，但概念是一样的：管理组件内的多个状态。

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>
  );
};