在React中回圈時如何創建顯示/隱藏按鈕

我正在開發站點上作業并且遇到問題。問題是我正在回圈資料檔案以創建一些專案卡。每個專案卡都有一個顯示更多/顯示更少按鈕來顯示/隱藏卡描述。

我的問題是當前設定正在映射資料并導致它，因此每當單擊一個時，所有三個都同時打開或關閉。請幫我解決這個問題。相關代碼如下所示：

資料示例：

{
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 ?
                    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>
      )
  })}   
  </>
    )   
}
export default Showcase
           

所以我只需要一些幫助來弄清楚如何設定它，以便每個按鈕都知道正在點擊哪張卡片并且只打開那個按鈕。非常感謝你幫助我。感謝您的寶貴時間和極大的幫助。

博迪

uj5u.com熱心網友回復：

您應該更新HeroContext狀態以保存對id顯示/隱藏的 s 的參考。

例子：

const [readMoreState, setReadMoreState] = useState({});

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

// context value
{ readmore: readMoreState, 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
              ? 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>
  )
})}  

uj5u.com熱心網友回復：

如果您將展示專案拆分為新組件，則會更容易。

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

標籤：

上一篇：如何增加在專案型別中找到的類別的大小

下一篇：將組件動態附加到地圖函式中