如何使一次从一格牌中只扩大一张牌？

Question

我有一个‘卡片’显示游戏的网格，当我点击时，展开显示更多的信息，但是当我点击一个，所有的卡片展开打开，我只想一次展开一个。

这是我到目前为止所拥有的一个码箱。谢谢你的帮助！

Answer 1

这是工作部件。组件状态必须反映当前打开的卡，如果没有打开卡，则为null。还将class更改为className，因为这是从CSS设置组件类的正确方法

export const GameCard = () => {

  const [openedCard, setOpenedCard] = useState(null);

  return (
    <div id="card_wrapper">
      {games.map((game) => (
        <motion.div
          transition={{ layout: { duration: 1, type: "spring" } }}
          layout
          onClick={() => setOpenedCard(game.id)}
          key={game.id}
          className="card"
          name={game.name}
          style={{
            backgroundImage: `url(${game.background})`,
            backgroundSize: "cover",
            backgroundRepeat: "no-repeat"
          }}
        >
          <motion.h2 layout="position">
            {" "}
            <img src={game.logo} alt={game.alt} />
          </motion.h2>
          {openedCard === game.id && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 1 }}
              className="expand"
            >
              <p> {game.description} </p>
            </motion.div>
          )}
        </motion.div>
      ))}
    </div>
  );
};

当点击任何卡时，扩展所有卡的问题与React无关，但它是由#card_wrapper的flex-box设置引起的:默认情况下，align-items设置为stretch，但您需要将其改为flex-start。

#card_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

顺便说一下。您在样式表中定义了两次#card_wrapper，而不是在样式表中定义的。

最后一个但最不重要的是--记住使用className螺旋桨而不是class --您需要修复这个问题的games.js。

Answer 2

试试这个：

// add new state to capture the index of the clicked element :
const [elementId, setElementId] = useState(null);

在返回部分中，捕获onClick中单击的索引：

return (
    <div id="card_wrapper">
      {games.map((game) => (
        <motion.div
          transition={{ layout: { duration: 1, type: "spring" } }}
          layout
          onClick={() => {
            setIsOpen(!isOpen);
            setElementId(game.id);
       }}
...)

最后，只有在(isOpen)和(game.id === elementId)：

{isOpen && game.id === elementId && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 1 }}
              class="expand"
            >

全沙箱示例：这里