在 React 中循环时如何创建显示/隐藏按钮

Question

我正在开发一个网站，但遇到了问题。问题是我正在循环数据文件以创建一些项目卡。每个项目卡都有一个显示更多/显示更少按钮来显示/隐藏卡描述。

我的问题是当前设置正在映射数据并导致它，因此每当单击一个时，所有三个都同时打开或关闭。请帮我解决这个问题。相关代码如下：

数据示例：

{
name: "Hot in the Biscuit",
id: "3a34",
image: "/images/bonnie.jpg",
description: "A multi-page front-end business website for a local restaurant in Koh Samui, Thailand. Custom design built with vanilla JavaScript, HTML and CSS.",
link: "https://www.xxxxxxxxxxxxx.com",
date: "2021",
github: "https://github.com/xxxxxxxxxxxxxxxxxxxxxx"
},

展示展示组件的英雄文件：

               <h1>Featured Projects</h1>
             <div>
             <Showcase/>
             </div>

展示卡片的创建位置（删除了不必要的代码 - 类和图像）：

const Showcase = () => {
    const {readMore, setReadMore} = useContext(HeroContext)
    const {toggleMenu} = useContext(NavbarContext)
    return(
        <>
  {showcase.map((item) => {
    const {id, name, image, link, github, description, date} = item;
      return (
        <div key={id}>
        <div>
       {!toggleMenu &&
        <div>
        <Image/>
        </div>
       }
        </div>
        <div>
            <div>
                <h2>{name} | {date}</h2>
            </div>
            <div>
                <h4>{ readMore[id] ?   <-- THIS IS WHERE YOU NEED AN ID
                    description :
                    `${description.substring(0, 100)}...`
                    } <button key={id} onClick={() => setReadMore(!readMore)}>{readMore[id] ? "Show Less" : "Show More"}</button>
                    </h4>
            </div>
            <div>
            <a href={github}>
                <FiGithub/>
            </a>
                <a href={link}>
                <h4 >See For Yourself! &#8594;</h4>
                </a>
            </div>
        </div>
    </div>
      )
  })}   
  </>
    )   
}
export default Showcase
           

所以我只需要一些帮助来弄清楚如何设置它，以便每个按钮都知道正在点击哪张卡片并且只打开那个按钮。非常感谢你帮助我。非常感谢您的宝贵时间和帮助。

博迪

Answer 1

如果将展示项目拆分为新组件会更容易。

const ShowCaseItem = ({ data }) => {
  const { toggleMenu } = useContext(NavbarContext)
  const [readMore, setReadMore] = useState(false)
  const { id, name, image, link, github, description, date } = data;
  return (
    <div key={id}>
      <div>
        {!toggleMenu &&
          <div>
            <Image />
          </div>
        }
      </div>
      <div>
        <div>
          <h2>{name} | {date}</h2>
        </div>
        <div>
          <h4>{readMore ?
            description :
            `${description.substring(0, 100)}...`
          } <button key={id} onClick={() => setReadMore(!readMore)}>{readMore ? "Show Less" : "Show More"}</button>
          </h4>
        </div>
        <div>
          <a href={github}>
            <FiGithub />
          </a>
          <a href={link}>
            <h4 >See For Yourself! &#8594;</h4>
          </a>
        </div>
      </div>
    </div>
  )
}
const Showcase = () => {
  const { readMore, setReadMore } = useContext(HeroContext)
  return (
    <>
      {showcase.map((item) => <ShowCaseItem data={item} />)}
    </>
  )
}
export default Showcase

Answer 2

您应该更新HeroContext 状态以保存对显示/隐藏的ids 的引用。

例子：

const [readMore, setReadMore] = useState({});

const readMoreToggler = (id) => setReadMore(state => ({
  ...state,
  [id]: !state[id], // <-- toggle boolean value
}));

// context value
{
  readmore,
  setReadMore: readMoreToggler, // pass readMoreToggler as setReadMore
} 

...

const { readMore, setReadMore } = useContext(HeroContext);

...

{showcase.map((item) => {
  const {id, name, image, link, github, description, date} = item;
  return (
    <div key={id}>
      <div>
        ...
      </div>
      <div>
        ...
        <div>
          <h4>
            {readMore[id] // <-- check by id if toggled true|false
              ? description
              : `${description.substring(0, 100)}...`
            }
            <button
              onClick={() => setReadMore(id)} // <-- pass id to toggle
            >
              {readMore[id] ? "Show Less" : "Show More"} // <-- check by id if toggled true|false
            </button>
          </h4>
        </div>
      <div>
      ...
    </div>
  )
})}